Layer animation manager

This tutorial is for Smart Slider 3.3.14. If you're using an older version, update.

You can manage your layer animations from the layer window itself.

From version 3.3.14 there are two types of layer animations:

  • Basic animations: these are the same animations, which were available in the previous version.
  • Reveal animations: special layer animations, introduced in 3.3.14

Basic Animation settings

Layer animations work the way that you can put as many animations on one layer, as many you want with the Add Keyframe. The configurations you have will be based on the original position for every animation. The original position will be the endpoint, so for example if you put 100px to the Offset - Y, your layer will start from 100px higher, and move down to the original position. You can see an example here.

Duration

The duration of the animation step.

Easing

The pace of the animation. You can see them here.

Opacity

This is how transparent your layer will be.

Offset

This is the position of your layer.

Rotate

You can rotate your layer around the X, Y and/or Z axis.

Scale

Your layer will be scaled up or down to these given numbers.

Skew

Expert

Your layer will be skewed by the given percent.

Basic Layer global animation properties

These special settings appear after clicking on the Settings button at each animation type.

IN

Special zero

If you turn this option on, the last layer animation won't be an animation, it will just change your layer to the selected display. This will be the ending zero position, the origo, so you will have to adjust your animations to that point. You can see an example here.

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate – Z value at the Animation settings, and change the X and Y positions.

LOOP

You can use this animation to animate your layer as long as the slide is active, for example, you can spin an icon or an image to get attention. Of course, you can use events too which will trigger these animations.

Repeat count

If you don't want your loop to be endless, write a number there, and it will play as many times.

Start delay

The animation will wait this many MS before it starts.

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate – Z value at the Animation settings, and change the X and Y positions.

OUT

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate - Z value at the Animation settings, and change the X and Y positions.

Reveal Animation

Learn more about the reveal animation in our blog post.

Color

The color of the effect.

Duration

The length of the animation.

Delay

The amount of time the animation waits before start.

From

The effect that moves in the colored box.

To

The effect that removes the colored box.

Easing

The pace of the animation.

Content

The animation of the actual content.