Flashing layers - Repeated

☝️ Note: This tutorial is for Smart Slider 3 Pro version only!

⚠️ Warning: 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:

☝️ Note: To be able to place layers on top of each other, you need them to be in Absolute position. For the best responsive result, we recommend having the layer with the longest text in Default position. This way the Default positioned layer will make enough space for the Absolute positioned layers to display properly on smaller screens.

1

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.

2

Turning on Repeatable

Once the animations are set up, turn on the Repeatable option.

3

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.

4

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.

5

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"

💡 Tip: To calculate the Start delay, use the following formula: (N - 1) * ID + (N - 1) * ODe.

N: number of layers in the animation
ID: incoming layer animation's duration
ODe: outgoing layer animation's delay

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.

💡 Tip: To calculate the End delay, use the following formula: (N - 2) * ID + (N - 1) * ODe.

N: number of layers in the animation
ID: incoming layer animation's duration
ODe: outgoing layer animation's delay

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.