Layer animation - Flashing layers - Repeated

You need advanced knowledge and understanding of how Smart Slider 3's layer animations work to be able to follow this tutorial.

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

Creating the layer animations - Incoming

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. Select a default animation or create your own. Then turn on the Repeatable for this animation.

Creating the layer animation - Outgoing

Now you should add a new Outgoing animation by going to your layer's Animation tab. Once you picked an animation, hit the More button to open the Animation manager:

If you want to tweak your animation, do that now.

Create a new animation step and be sure that the opacity is set to 0.

Click Apply to add the animation and close the Animation manager.

Configuring the effect

If you check your timeline, it looks like this: By dragging each animation, you are able to adjust their delay. For instance, I want my Incoming animation to happen 400MS later, so I'll drag the Incoming animation.

The next thing that needs to be done is adjusting for how long should the text stay. I want this to happen for 800MS, so I'll drag the first Outgoing animation.

So far so good.

A little bit of calculation

To ensure that the layer animations happen in a nice sequence there we'll need to adjust the second Outgoing animation. It's value depends on a couple of different factors:

  • the amount of layers you need to switch
  • the length of the incoming animation
  • the delay between the incoming and first outgoing animation

Think of this second outgoing animation as "main waiting time" which each layer needs to wait in order to play again. Hence, the second outgoing animation needs to play after each previous incoming animation has played and each delay is over.

A simple formula:

Second outgoing animation duration = (amount of layers you have - 1) * (incoming animation duration + delay) - first outgoing animation duration

Based on this formula, in order to repeat the layer animations in my four layers, I'll need 4000MS duration on my second outgoing layer as I have 800MS delay and incoming duration.

So let's set this duration

Adjusting the delay

Before proceeding, copy the layer animations to each layer where you need them.

Now the only thing that remains is adjusting the incoming animation's delay to play the animations in order. Simply drag the animations on the timeline and align the incoming animation's start to the start of the first outgoing animation.