Slider Revolution 6.3 NOW available!

30+ Pre-Built Layer Transitions

Slide Fade In Slide Short From Top Slide Short From Bottom Slide Short From Left Slide Short From Right Slide Long From Right Slide Long From Left Slide Long From Top Slide Long From Bottom Slide Skew From Long Left Slide Skew From Long Right Slide Skew From Short Left Slide Skew From Short Right Slide Random Rotate & Scale Slide Letter Fly In From Bottom Slide Letters Fly In From Left Slide Letters Fly In From Right Slide Letters Fly In From Top Slide Masked Zoom Out Slide Popup Smooth Slide Rotate In From Bottom Slide Rotate In From Zero Slide Slide Mask From Bottom Slide Slide Mask From Left Slide Slide Mask From Right Slide Slide Mask From Top Slide Smooth Popup One Slide Smooth Popup Two Slide Smooth Mask From Right Slide Smooth Mask From Left Slide Smooth Slide From Bottom Slide No Animation   1/32

Example Usage:

Quick Tip

Skip to #32 above for the "No Animation" syntax.

Syntax Note

Click here to view a breakdown of the "data-frames" attribute.

The first animation Object in the “data-frames” attribute represents the “start” animation.  And the second is used for the “end”.

<!-- Text Layer with Fade-In Transition -->
<div class="tp-caption tp-resizeme largewhitebg"
 
    data-frames='[{"delay":0,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},
                  {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
 
    data-x="right"
    data-y="center"
    data-hoffset="30"
    data-voffset="-30"
    data-width="['500']"
    data-height="['auto']"
 
>Caption Text</div><!-- END LAYER -->

Popular Solutions