Flashing layers - Not 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 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 animation for the first layer

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 at this step, too.

Decide which layer will be shown when the slider loads, select it, and add a new OUT animation by going to its Animation tab.

2

Creating the animations for the other layers

Select the layer that should come next, go to its Animations tab and add a new IN animation. I suggest using Fade from the Fade group. I'll pick that animation.

Add an OUT animation for this layer as well. Copy the animation to your other layers. At this point, your timeline should look like this:

Now go and remove the Out animation from the last layer, as we want that to keep showing.

3

Working with the timeline

Once every animation is set up, we can start working with the timeline. While you can set the delay at each animation in the Layer window, it's more convenient to adjust them in the timeline.

So first, grab the first animation, which has only an out animation and drag it to gave it some delay. I'll add 500MS. Then grab the second layer's in animation, and move it just behind the first layer's out animation. This will ensure that the second layer won't show up until the first is visible. Give 500MS delay to the second layer's OUT animation.

Repeat this at the rest of your layers. Make sure that the current layer's IN animation starts after its previous layer's out animation.

See it on a video: