Layer animation - Flashing layers - Repeated

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

This tutorial will teach you how to make continuously flashing layers, like this:

For creating this layout you need to use the Canvas editing mode, where you can move your layers freely on the canvas, and you can put the layers above or below other layers.
Creating the layer animations - Incoming and Outgoing

The first step in this tutorial is to add the layers you would like to use. You can select any kind of layers, texts, headings or images. You are free to customize them before proceeding.

Select a layer and add a new Incoming animation by going to its Animation tab. I'll pick Fade from the Fade group, but you can select any animation you like.

Now go to the OUT tab and add an out animation. I'll pick fade here as well.

Turning on Repeatable

Once the animations are set up, turn on Repeatable.

Copy the layer animations

This effect looks best if all layers have the same animation. Go ahead and copy the animation from the first layer to the rest

Adjusting the animations on the timeline

After all animations were copied, your timeline should look like this:

The timeline is a useful tool to manage layer animations. By default, you can manage the following layer animation properties on the timeline:

  • animation duration
  • animation delay

You can adjust them as you can see on the video:

Since the Repeatable was turned on in the previous step, you can also adjust the Start delay and End delay on the timeline.

Setting up the animations

To create a looping layer animation effect, the Start and End delay. Your goal needs to be the following:

  • All Start delay needs to start at the same place where the previous layer's Out animation starts
  • All End delay must have the size of all other layer's out animation and out animation delay.

Let's say your animation looks like this:

The first layer seen is the bottom one, labeled "Good", and the second is above it, "Better". I'll go though the calculation process of the "Better layer"

The Start delay of the "Better" layer will be 1100MS. You can calculate it from the 800MS (in animation duration) + 300MS (out animation delay). The value can be written to the layer window → Animation tab → Events → Start delay field.

The End delay of the "Better layer" will be: (3-1)*800MS (all other layer's out animation, but the last one) + 3*300MS (all other layer's out delay), which is 2500MS.

After you added each Start delay and End delay, your timeline will look like this:

And that's it.