Use Beautiful Layer Animations in Smart Slider 3 Pro

Everyone loves fancy transitions on their website. A layer animation helps catch and keep the visitor’s attention for as long as possible. Having smooth, lightweight animations on pages has become a trend as people tend to remember images and moving things easier.

When you create your slider, and put your layers on it, everything stands still in their place. However, wouldn’t it be fancy if the layers moved? In Smart Slider 3 Pro you have the option to use layer animations on your slider. They can come in, loop, go out, repeat, so you can create even complex animations if you want. Read this article and learn everything about layer animations.

Importance of layer animations

Layer animation helps you create really amazing sliders, because the movement catches the visitors’ eye. A small animation on a layer can help the visitor to focus on it, it makes your site modern and makes your website come alive. In addition, because of the movement, the visitors read the text on the animated layer subconsciously.

It is also important to mention that you should be careful with the animations, but don’t take them to the extreme. You should keep the harmony in the slider, make sure that the animations aren’t disturbing. When each layer moves at the same time in a different way, it might backfire. Having to focus on a lot of things can be confusing. When it comes to animations, less can be more.

In Smart Slider 3 Pro you can animate all of your layers, you can create any kind of animation that you have imagined. Also, there are a lot of predefined animations to choose from, if you quickly want to have an animation on your layer. The best thing is that if you are done creating a complicated animation, you can copy it to your other layers as well.

Animation types

In Smart Slider you can choose from a lot of pre-set layer animations. There are basic animations like the fade or move, special animations which were built from more Keyframes, and the newest type is the reveal animation. Reveal animation is an elegant and modern effect which can reveal the layers. It animates a colored box in front of the actual layer, which attracts the eye.

You can set all the animations at the Layer window → Animation tab, just select the layer and set an incoming animation, a loop, or an outgoing animation. Also, there is an option to set an Event, and the animation will be triggered by that event like opening a popup. You can read more about them below.

Animations in Smart Slider 3

In Smart Slider 3 Pro you can’t only add an animation to your layers, you can use text animation too, such as the animated heading or the highlighted heading. Also, there is an option to set a main animation to your slider and use animations on your background. These animations are fancy, and there are a lot of pre-defined types available which you can choose from.

In layer animation

The most popular layer animation is the incoming animation. It introduces the layer so the visitor can see it when they need to. In layer animations usually start right after the background animations have finished, but this can be changed for each slider. This kind of animations were made to introduce the layer, for example, fading it in or moving it in from outside of the canvas.

Create mask for a layer animation

To have an even more splendid effect, you can use the mask to make the layer animation only happen within the layer. When this option is used, the content of the layer will only appear when it reaches the original position of the layer. In other words, only those parts of the layer will be visible which are inside the layer’s original position.

Loop layer animation

The loop animation keeps repeating itself until an out animation takes effect on the layer, or until the slide is changed. Using the Events you can put a loop animation (e.g. a pulsing effect) on your layer when the user hovers over it, and when the cursor is not above the layer anymore the animation will stop.

Out layer animation

In Smart Slider 3 Pro you can use outgoing animations, too. Usually, they play right after the in-animation has finished, but they can be played right before the slide-switching, and they can be triggered by any event. The out-animations are used to hide a layer on the current slide. For example, on the headphone slider the text that appears first is hidden using layer animations.

When you create a complex animation and use events to trigger them, you should use the repeatable option. This function can be also useful if you want to create for example a flashing effect, where layers appear then disappear after each other. Both the in- and out-animations have a repeatable option. And the out animation can be skipped per slider, if you don’t want to wait for every single out-animation to happen when you switch slides.

Create multiple layer animations

In Smart Slider 3 Pro you can build complex animations with using keyframes. You can create as many keyframes as you want, and use it after each other. The basic animations can have multiple keyframes, with different animations in them. For example, you can create an in-animation, the layer can fade in, move left, move right and rotate.

Layer animations work the way that enables you to put as many animations on one layer as you want with Keyframes. Also, we’ve made some predefined chain animations to help you have a fancy animation as fast as possible!

Managing the layer animation on the easy to use timeline

Every layer animation appears on a visual timeline, where the delay and duration can be changed. You can see the three layer animations with different colors. When the animation is clicked, it will open the layer window’s animation tab, and let you edit the selected animation. Pressing the space key will start the animations, so you can see a preview on how they will look.

The timeline has another great feature. It lets you copy and paste animations between different layers. For example, if you created a complex animation, you can quickly have it on different layers. So you don’t need to create the animations all over again, you can save time and effort.

Specify events for layer animations

People sometimes want more from layer animations, for example that the animation happens with an event. With Smart Slider 3 Pro you can handle the animations with events. There are a lot of predefined situations, such as when the visitor clicks or the mouse enters the layer area. These events are perfect for creating simple events, which can be triggered if the user interacts with the slider. For example you can show layers when the user hovers on the slide, and hide them if their mouse leaves the slide area.

With default events you can cover a lot of use cases, but you can create your own custom event as well. Any specific layer animation can be triggered by any number of events, so you can create a popup for example, which can be trigger by clicking on the layer.

It is important to mention that there are no events without layer animation. Using events you can make layers appear and disappear on mouse over, mouse out or mouse click.

Two positions for your layers

In Smart Slider your layers can have Default or Absolute position. Working with Default layers is like using a page builder. Additionally, you can work fast with great responsive behavior. Absolute layers allow free editing, but its much more complex to achieve a good responsive look.

However, Absolute layers can be very useful if you build a complex animation, because these layers let you put a layer above or below the others. For example using Absolute layers you can create a popup, or you can create small moving elements like in the City example.

Final Thoughts

With a nice animation you can cheer up your website and you can raise the visitors’ attention. In Smart Slider 3 Pro you can use layer animations on every slider type, so in WordPress carousels or image sliders as well, and you can achieve what you’ve imagined.

Take your layer animations to the next level with the easy to use animation builder. Create unique and fascinating animations choosing a basic or a reveal animation. Don’t forget: a moving design element will always outperform any static one when it comes to grabbing your users’ attention.

Tags: AnimationEffectLayer AnimationLayers

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team. I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.