The Simple Animations handled via Classes:

  • slidebg1
    BASIC CAPTION
    ANIMATIONS
    FADE
    SHORT FROM LEFT (sfl)
    SKEW FROM LEFT (skewfromleft)
    SHORT FROM TOP (sft)
    LONG FROM TOP (lft)
    SHORT FROM RIGHT (sfr)
    SKEW FROM RIGHT (skewfromright)
    SHORT FROM BOTTOM (sfb)
    LONG FROM BOTTOM (lfb)
    RANDOM ROTATE (randomrotate)
    LONG FROM RIGHT (lfr)
    LONG FROM LEFT (lfl)
  • slidebg1
    BASIC CAPTION
    ANIMATIONS
    FADE
    SHORT FROM LEFT (sfl)
    SKEW FROM LEFT (skewfromleft)
    SHORT FROM TOP (sft)
    LONG FROM TOP (lft)
    SHORT FROM RIGHT (sfr)
    SKEW FROM RIGHT (skewfromright)
    SHORT FROM BOTTOM (sfb)
    LONG FROM BOTTOM (lfb)
    RANDOM ROTATE (randomrotate)
    LONG FROM RIGHT (lfr)
    LONG FROM LEFT (lfl)

The Custom Animations (available via the customin and customout classes) Creator:

Custom Caption Animation Builder random

LAYER EXAMPLE
In Animation Editor (Click to Collapse/Expand)
Speed & Easing
Speed: ms Easing: Split: Speed: ms
Transition
X: px Y: px Z: px
Rotation
X: ° Y: ° Z: °
Scale Skew
X: % Y: % X: ° Y: °
Opacity Perspective Origin
0-100: % 300-1600: px X: % Y: %
Out Animation Editor (Click to Collapse/Expand)
Speed & Easing
Speed: ms Easing: Split: Speed: ms
Transition
X: px Y: px Z: px
Rotation
X: ° Y: ° Z: °
Scale Skew
X: % Y: % X: ° Y: °
Opacity Perspective Origin
0-100: % 300-1200: px X: % Y: %

Result of Custom IN/OUT Animations


<div class="tp-caption customin customout"
	data-x="center"
	data-y="center"

	data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
	data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"

	data-start="1000"
	data-speed="500"
	data-easing="Power3.easeIn"

	data-splitin="None"
	data-elementdelay="100"

	data-end="1500"
	data-endspeed="500"
	data-endeasing="Power3.easeIn"

	data-splitout="None"
	data-endelementdelay="100"

	>LAYER EXAMPLE
</div>

How to use it?

Simple copy the Result div above as a new layer under your <li> Slide container. You can add some further Classes for Styling the Caption (see all style in the settings.css file)

In case you have already some Caption and you only wish to have a differen transition than the Basic Caption Transitions (see Documentation for full list) you can simple copy the data- customin,customout,speed,easing,endspeed and endeasing parameters. Dont forget to set to your caption a position via data-x and data-y and set the start and endtime for tha animatiosn !