Importance of the layer animations
When a button does a small animation, it makes the visitor focus on that moving element. Make some other layer do another small animation: your visitors will love it! Just don’t let the animation go too far. When each element (quickly) moves at the same time in a different way. That might backfire: lots of moving elements (lots of things to focus on) might confuse the user, and instead of making them to stay on your page and find out your story. They’ll scroll away, or leave your site entirely. When it comes to animations, the less can be more.
In Smart Slider 3 you can animate both your text and image layers. As a matter of fact, all 15 layers can have layer animation. Sounds wonderful, doesn’t it? The easy to use animation builder comes with a great variety of settings. It can be used to create any kind of animation you can imagine. There are lots of predefined animations to choose from, if you quickly want to have an animation on your layer. The best thing is that when you are done creating a complicated animation, you can simply save it into one of the animation sets. Then can select it from the animation list later, so you don’t have to create it again.
You don’t even need to create a slider to have layer animations as they can be used on blocks, too. Take your layer animations to the next level with Smart Slider 3’s easy to use animation builder, create unique and fascinating animations choosing from the three main layer animation types offered: in, out, and loop; we are going to explore them below.
In layer animation
In animations usually start right after the background animations have finished, but this can be changed for each slider. These kind of animations were made to introduce the layer, for example, fading it in or moving it in from outside of the canvas.
It is also possible to rotate a layer using the Special zero feature which is available for every IN layer animation. This feature will allow you to turn a horizontal layer into a vertical one when the slider loads, without a noticeable rotation effect.
Create mask for 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. For example: when an area layer is used and it has a simple IN animation where only the offset was changed, the area will appear from that point where the layer should be if it didn’t have any animations on it, giving the illusion of a progress bar.
In other words, only those parts of the layer will be visible which are inside the layer’s original position. If you are familiar with Photoshop, masking is a commonly used tool there, and you can find some tutorials and quick examples on what can be achieved with masking here.
Out layer animation
They’re very much like the In animations. 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 this slider, the headphone and the text that appears first is hidden using layer animations.
The out animations have a special feature called Instant out which makes the out animation happens right after the in animation have finished. Both the in and out animations have a repeatable option which can be used to achieve such effects. 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.
Loop layer animation
Unlike the in and out animations, the loop animation keeps repeating themselves 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 (e.g. the pulsing effect) will stop.
If you create a call to action button and put a smooth loop animation on it it will basically scream for your user’s attention.
Chaining multiple layer animations together
Each animation type can have multiple “steps”, with different animations in them. For example, you can create an IN animation, it can fade in, move left, move right and rotate.
We made some predefined chain animations to help you have a fancy animation as fast as possible!
Timeline to adjust animation speed and position
Every layer animation appears in a visual timeline, where the delay and duration can be changed. When the animation is clicked, it will open the animation manager window 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 can be used to copy animations from layer to layer.
Specify events for layer animations
There are no events without layer animation. Using events you can make layers appear and disappear on mouse over, mouse out or mouse click. If you would like to know more about the events, we wrote an article on them which you can find here.
While any kind of effect can be achieved using the layer animations, it is worth knowing that the parallax effect is not a layer animation, and it can’t be done with layer animations, but of course, Smart Slider 3 makes it possible to have the parallax effect on each layer.
- Layer animations (in, loop, out)
- Animation events
- Parallax effect