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 -->
<!-- *************** -->