30+ Pre-Built Layer Transitions
Example Usage:
Quick Tip
Syntax Note
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 -->
