The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Layer Groups allow for relative positioning and grouped animations.

Similar to a regular Content Layer, a Layer Group has its own animation and positioning.  Then Content Layers nested inside the Group will be positioned in relation to the Group itself.  And animations applied to the Group allow for animating multiple Content Layers at the same time, in the same way.

A Layer Group's wrapper container has the same syntax as a regular Layer, with the "tp-resizeme" class replaced with "rev_group" instead.

<!-- BEGIN LAYER GROUP WITH "rev_group" class added -->
<div class="tp-caption rev_group"
 
     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'
 
     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="['auto']"
     data-height="['auto']">
 
        <!-- ***************************** -->
        <!-- ADDITIONAL LAYERS NESTED HERE -->
        <!-- ***************************** -->
 
</div>
<!-- END LAYER GROUP -->
 

Content Layers are then nested inside the "rev_group" wrapper container:

The “data-frames” animation for the Content Layers below represents “No Animation”, shown in #32 here.  This way only the Group itself will animate, based on the group’s own “data-frames” value.

The example below represents a single Layer Group containing two regular Layers.

<!-- ***************** -->
<!-- BEGIN LAYER GROUP -->
<!-- ***************** -->
<div class="tp-caption rev_group"
 
     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'
 
     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="['auto']"
     data-height="['auto']">
 
        <!-- *********************** -->
        <!-- BEGIN CONTENT LAYER ONE -->
        <!-- *********************** -->
        <div class="tp-caption  tp-resizeme largewhitebg"
 
             data-frames='[{"delay": 0, "speed": 0, "frame": "0", "to": "o:1;", "ease": "Linear.easeNone"},
                           {"delay": "wait", "speed": 0, "frame": "999", "ease": "nothing"}]'
 
             data-x="center"
             data-y="top"
             data-hoffset="0"
             data-voffset="20"
             data-width="['auto']"
             data-height="['auto']"
 
        >Content Layer One</div>
        <!-- ********************* -->
        <!-- END CONTENT LAYER ONE -->
        <!-- ********************* -->
 
        <!-- *********************** -->
        <!-- BEGIN CONTENT LAYER TWO -->
        <!-- *********************** -->
        <div class="tp-caption  tp-resizeme largewhitebg"
 
             data-frames='[{"delay": 0, "speed": 0, "frame": "0", "to": "o:1;", "ease": "Linear.easeNone"},
                           {"delay": "wait", "speed": 0, "frame": "999", "ease": "nothing"}]'
 
             data-x="center"
             data-y="bottom"
             data-hoffset="0"
             data-voffset="20"
             data-width="['auto']"
             data-height="['auto']"
 
        >Content Layer Two</div>
        <!-- ********************* -->
        <!-- END CONTENT LAYER TWO -->
        <!-- ********************* -->
 
</div>
<!-- *************** -->
<!-- END LAYER GROUP -->
<!-- *************** -->

Popular Solutions