Slider Maker

Layer Animation - Jssor Slider Maker


Layer Animation

Layer animation means layer's motion properties change dynamically in the timeline.

To let a layer animate during the period between 1 second to 2 second, you can insert 2 motion points (P1 at 1 second and P2 at 2 second), and change motion property values of P2.



Reference: Insert Motion Point
Reference: Tutorial: 003-layer-animation.slider



Motion Properties

Select a motion point to set motion properties.
X:

Moves along the x-axis.
Default value is 0.


Y:

Moves along the y-axis.
Default value is 0.


Opacity (%): [0%-100%]

Fades.
Default value is 100%.


Z-Index:

Moves up and down from other layers by animating z-index.
Default value is 0.


Rotate: [deg]

Rotates.
Default value is 0. Example values 10, 20, 30, 45, 90, 720, -10 ...


Rotate-X (3d): [deg]

Rotates around the x-axis.
Default value is 0. Example values 10, 20, 30, 45, 90, 720, -10 ...
See Layer Animation (3d)


Rotate-Y (3d): [deg]

Rotates around the y-axis.
Default value is 0. Example values 10, 20, 30, 45, 90, 720, -10 ...
See Layer Animation (3d)


Scale-X:

Scales along the x-axis.
Default value is 100%.


Scale-Y:

Scales along the y-axis.
Default value is 100%.


Translate-Z (3d):

Moves along the z-axis.
Default value is 0.
See Layer Animation (3d)


Skew-X: [deg]

Skews along the x-axis.
Default value is 0. Example values 10, 20, 30, 45, 90, 720, -10 ...


Skew-Y: [deg]

Skews along the y-axis.
Default value is 0. Example values 10, 20, 30, 45, 90, 720, -10 ...


Clip -> Left (%):

Clips on the left side.
Default value is 0%.


Clip -> Right (%):

Clips on the right side.
Default value is 100%.


Clip -> Top (%):

Clips on the top side.
Default value is 0%.


Clip -> Bottom (%):

Clips on the bottom side.
Default value is 100%.