Layer Animations

Every Layer in the Slider can be animated, transformed on 4 basic and 2 extended ways.  Based on these transformations and animation speeds you can create unlimited art and type of effects, which will make your slides look individual and eye catching.

In the following pages we will discuss about the idle, in, out, hover, maskin and maskout transformations.

Layer Animations are always transformed from transform_in into transform_idle and from transform_idle into transform_hover and into transform_out.

Only define the Keys in each Transform settings what you want to animate !
i.e.:

transform_idle=”o:1;rX:10″ 
transform_in=”o:0;s:500″

will fade the Layer in within 500ms (0.5 sec). The layer is 10deg rotated, however the Rotation will not be animated, since it is only defined in the Idle Transform keys.

To Animate it from 0 deg to 10deg you will need to define the value rX also in the in transform as shown here:

transform_idle=”o:1;rX:10″
transform_in=”o:0,rX:0″

And if you wish to rotate from 10Deg into Zero Degree you will need only define the in animation Transform, and leave the rotation value in the idle attribute as shown below:

transform_idle=”o:1;”
transform_in=”o:0,rX:10″

To understand a bit better what kind of Keys you can use in which transform key, please read here further:

Transform Keys can be defined via shortcodes or due full names. Here a short overview of all possible keys and their values:

o/opacity: 0-1 , floating Number ( 1 = 100% Visible, 0.5 = 50% Transparent)
sX/scaleX: 0-100 Floating Number.  1 = 100%
sY/scaleY: 0-100 Floating Number.  1 = 100%
skX/skewX: 0-1000 (integer. Skew X in px)
skY/skewY: 0-1000 (integer. Skew Y in px)
rX/rotationX: (-)1200 – 1200 (Integer, Rotation Degree)
rY/rotationY: (-)1200 – 1200 (Integer, Rotation Degree)
rZ/rotationZ: (-)1200 – 1200 (Integer, Rotation Degree)
z: Integer – transformZ in px

“Idle” Transformations are the transformations which are active on the Layer once the layer finished its “in” or “mouseleave” Animation, and before the layer starts it “out” or “hover” animation.

Transform Keys can be defined via shortcodes or due full names.

o/opacity: 0-1 , floating Number ( 1 = 100% Visible, 0.5 = 50% Transparent)
sX/scaleX: 0-100 Floating Number.  1 = 100%
sY/scaleY: 0-100 Floating Number.  1 = 100%
skX/skewX: 0-1000 (integer. Skew X in px)
skY/skewY: 0-1000 (integer. Skew Y in px)
rX/rotationX: (-)1200 – 1200 (Integer, Rotation Degree)
rY/rotationY: (-)1200 – 1200 (Integer, Rotation Degree)
rZ/rotationZ: (-)1200 – 1200 (Integer, Rotation Degree)
z: Integer – transformZ in px
s: duration of In Animation in ms
e: Easing of In Animation (see Easing Table)

“Hover” Transformations are the transformations which shown on Mouse Enter event over the layer.  This value is combined with the data_style_hover attribute where further styling properties can be defined as shown here:

This setting works only in combination with the data-transform_hover setting.  Hover Style Transformation Keys can be defined via shortcodes or due full names.

c/color: Text color (HEX or RGBA)
td/textDecoration: Text Decoration (underline, overline, none)
bg/backgroundColor: Background color (HEX or RGBA)
bc/borderColor: Border Color (HEX or RGBA)
bs/borderStyle: Border Style (dashed, dotted, solid, double)
bw/borderWidth: Border Width (px)
br/borderRadius: Border Radius (px or % value – TopLeft, TopRight, BottomRight, BottomLeft)

Transform Keys can be defined by short forms or by full names.

The Available Keys for Transformations:

x: -2000-2000 (integer. Transform X in px). or Special Values: left,right, {min,max}, [-175%],  (R)

y: -2000-2000 (integer. Transform Y in px) or Special Values: top,bottom, {min,max}, [-175%],  (R)

z: -2000-2000 (integer. Transform Z in px)

o/opacity: 0-1 , floating Number ( 1 = 100% Visible, 0.5 = 50% Transparent) or Special Values: {min,max}

sX/scaleX: 0-100 Floating Number.  1 = 100% or Special Values: {min, max},  (R)

sY/scaleY: 0-100 Floating Number.  1 = 100% or Special Values: {min, max},  (R)

skX/skewX: 0-1000 (integer. Skew X in px) or Special Values: {min, max},  (R)

skY/skewY: 0-1000 (integer. Skew Y in px) or Special Values: {min, max},  (R)

rX/rotationX: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

rY/rotationY: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

rZ/rotationZ: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

s: duration of In Animation in ms

e: Easing of In Animation (see Easing Table)

For some Key you can use special values, random values, % based values.

The syntax of Special values:

random: {min,max}  – it will generate on runtime a random value between min and max value

relative: [+/- %]  it will calcualte a relative position from the IDLE position.  [-100%] will move -100% in a direction from the idleposition

absolute: left,right,top,bottom

value(R) – this is a suffix, and works only with the above defined values. The presetted value will be mirrored if Slide direction changes. Again, it Reverts the Animation when coming slide index is smaller then current slide index.  (R) comes behind the predefined value like  -50(R).   i.e. x:50(R) will  animate the layer from 50px right to the position if next slide comes, and it will animate from -50px (from the left) if previous slide comes.

The layer will be animated from the “in” Transformations set transformations into the “idle” set Transformations.

Transform Keys can be defined by short forms or by full names.

The Available Keys for Transformations:

x: -2000-2000 (integer. Transform X in px). or Special Values: left,right, {min,max}, [-175%],  (R)

y: -2000-2000 (integer. Transform Y in px) or Special Values: top,bottom, {min,max}, [-175%],  (R)

z: -2000-2000 (integer. Transform Z in px)

o/opacity: 0-1 , floating Number ( 1 = 100% Visible, 0.5 = 50% Transparent) or Special Values: {min,max}

sX/scaleX: 0-100 Floating Number.  1 = 100% or Special Values: {min, max},  (R)

sY/scaleY: 0-100 Floating Number.  1 = 100% or Special Values: {min, max},  (R)

skX/skewX: 0-1000 (integer. Skew X in px) or Special Values: {min, max},  (R)

skY/skewY: 0-1000 (integer. Skew Y in px) or Special Values: {min, max},  (R)

rX/rotationX: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

rY/rotationY: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

rZ/rotationZ: (-)1200 – 1200 (Integer, Rotation Degree) or Special Values: {min, max},  (R)

s: duration of Out Animation in ms

e: Easing of Out Animation (see Easing Table)

For some Key you can use special values, random values, % based values.

The syntax of Special values:

random: {min,max}  – it will generate on runtime a random value between min and max value

relative: [+/- %]  it will calculate a relative position from the IDLE position.  [-100%] will move -100% in a direction relative to the idle position

absolute: left,right,top,bottom

value(R) – this is a suffix, and works only with the above defined values. The presetted value will be mirrored if Slide direction changes. Again, it Reverts the Animation when coming slide index is bigger then current slide index.  (R) comes behind the predefined value like  -50(R).   i.e. x:50(R) will  animate the layer from 50px right to the position if next slide comes, and it will animate from -50px (from the left) if previous slide comes.

The layer will be animated from the “idle” Transformations into the “out” Transformations.

Transform Keys can be defined by short forms or by full names. It will generate a Mask around the Layer, and during the Layer animates in within the Mask (overflow invisible) the Mask will make a simple x,y transformation based on the settings below.

Please note, Mask transitions will be ignored if any rotation, skew set within the transform_idle settings !

The Available Keys for Transformations:

x: -2000-2000 (integer. Transform X in px). or Special Values: left,right, {min,max}, [-175%],  (R)

y: -2000-2000 (integer. Transform Y in px) or Special Values: top,bottom, {min,max}, [-175%],  (R)

The layer will be animated from the “idle” Transformations into the “out” Transformations.

Transform Keys can be defined by short forms or by full names. It will generate a Mask around the Layer, and during the Layer animates out within the Mask (overflow invisible) the Mask will make a simple x,y transformation based on the settings below.

Please note, Mask transitions will be ignored if any rotation, skew set within the transform_idle settings !

The Available Keys for Transformations:

x: -2000-2000 (integer. Transform X in px). or Special Values: left,right, {min,max}, [-175%],  (R)

y: -2000-2000 (integer. Transform Y in px) or Special Values: top,bottom, {min,max}, [-175%],  (R)

The layer will be animated from the “idle” Transformations into the “out” Transformations.

Loops on Layers are defined via an internal div container, which is wrapping the Layer content inside the tp-layers class.

The following example shows a loop “pendulum” on an Image Layer: