Layer Animations

5.0, Anatomy08.31.2015Krisztian

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:

Idle Transformation
data-transform_idle data-transform_idle="o:0.5;sX:1.5;sY:1.5;skX:10px;skY:10px;rX:15;rY:10;rZ:14;z:100;"

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.

Hover Transformation
data-transform_hover data-transform_hover="o:1;skX:0.1px;skY:0.1px;rX:0;rY:0;rZ:0;z:0;s:200;e:Linear.easeNone;"

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:

data-style_hover data-style_hover="c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0.25);cursor:pointer;"

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)

In Transformation
data-transform_in data-transform_in="x:-50px;y:-200px;rX:-10deg;rY:-15deg;rZ:-5deg;sX:0;sY:0;skX:15px;skY:15px;opacity:0;s:300;e:Power2.easeInOut;"

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.

Out Transformation
data-transform_out data-transform_out="x:right;y:top;rX:{-90,90};rY:{-90,90};sX:0;sY:0;opacity:0;s:300;s:300;e:Power3.easeInOut"

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.

Mask In Transformation
data-mask_in data-mask_in="x:50px;y:0px;"

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.

Mask Out Transformation
data-mask_out data-mask_out="x:50px;y:0px;"

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.

Loop Animations

Loop Basics

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:

Loop Types
The Loop Animations are defined via classes. The rs-looped class defines the Slider that the content within the container should be Animated and Looped. A second Class defines the art of the loop.The following Loop Animations are available in Slider Revolution for Layers:
  • Pendulum class: rs-pendulum
  • Rotate class: rs-rotate
  • SlideLoop class: rs-slideloop
  • Pulse class: rs-pulse
  • Wave class: rs-wave
For each Classes you will need to define the animation based attributes.
rs-pendulum
data-easing Type:Ease
Value:Loop Animation Ease

The Ease of the Loop Animation. See Ease Table here.

data-startdeg Type:Integer
Value:Degree

The start Rotation Degree for the effect.

data-enddeg Type:Integer
Value:Degree

The end Rotation Degree for the effect.

data-speed Type:Integer
Value:Sec

The Animation Speed in  sec.

data-origin Type:String
Value:"50% 50%"

The origin of the effect. Must be declared with two percentage i.e. “50% 50%” which is the center center of the element.

rs-rotate
data-easing Type:Ease
Value:Loop Animation Ease

The Ease of the Loop Animation. See Ease Table here.

data-startdeg Type:Integer
Value:Degree

The start Rotation Degree for the effect.

data-enddeg Type:Integer
Value:Degree

The end Rotation Degree for the effect.

data-speed Type:Integer
Value:Sec

The Animation Speed in  sec.

data-origin Type:String
Value:"50% 50%"

The origin of the effect. Must be declared with two percentage i.e. “50% 50%” which is the center center of the element.

rs-slideloop
data-easing Type:Ease
Value:Loop Animation Ease

The Ease of the Loop Animation. See Ease Table here.

data-xs Type:Integer
Value:offset in px

The start offset horizontal in px.

data-ys Type:Integer
Value:offset in px

The start offset vertical in px.

data-xe Type:Integer
Value:offset in px

The end offset horizontal in px.

data-ye Type:Integer
Value:offset in px

The end offset vertical in px.

data-speed Type:Integer
Value:Sec

The Animation Speed in  sec.

rs-wave
data-easing Type:Ease
Value:Loop Animation Ease

The Ease of the Loop Animation. See Ease Table here.

data-angle Type:Integer
Value:Degree/span>

The start Angle of the Wave Rotation.

data-radius Type:Integer
Value:px (distance)

The Size of the Wave (Amplitude).

data-origin Type:String
Value:"50% 50%"

The Origin of the Wave. Defiend via two percentage values. i.e. middle of the Element: “50% 50%”

data-speed Type:Integer
Value:Sec

The Animation Speed in  sec.

rs-pulse
data-easing Type:Ease
Value:Loop Animation Ease

The Ease of the Loop Animation. See Ease Table here.

data-zoomstart Type:float
Value:scale

The Scale/Zoom factor at start of Loop.

data-zoomend Type:float
Value:scale

The Scale/Zoom factor at end of Loop.

data-speed Type:Integer
Value:Sec

The Animation Speed in  sec.