How to Add Exit Animation in Slider Revolution

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

When it comes to sliders, visible animations are a classic feature. In fact, these first impression animations are among the top reasons for the popularity of the Slider Revolution plugin because they are so easy to create and they always look beautiful and natural.

Visible animations, as the name suggests, are animated layers that appear or arrive on the slide, as in the example in the Aoki theme.

However, besides the animations that appear, there is another important type of animation that can get you a long way: exit animations. As you can see in the example below, these animations have layers that come off or disappear from the slide. They may not be as popular as the animations that appear, but in some cases they can be extremely useful in giving your slider the perfect finishing touch and making a strong positive impression with your visitors.

However, there are a few things to keep in mind when creating a Slider Revolution exit animation, and we’ll go over them today.

Number of Slides

This is pretty obvious, but it doesn’t hurt to repeat: exit animations only work for sliders with multiple slides, especially if you plan to use them on all layers. Adding an exit animation to a single slide will leave you with a blank page when the animations are finished, and no one wants to see a blank page. So, to use exit animations, you need multiple slides.

background color

If your background color is white, you should pay attention to the exit animations. Besides looking clean, the white background can also give the slider a somewhat blank look. if you don’t have to avoid using exit animations on a white background.

Frame Start

Average slide time should be between 3000 and 4000 milliseconds. Let’s say your slide has a duration of 3500ms. If you want your exit animation to look natural, it shouldn’t start too soon. To set the frame start, go to: Layer Options > Animation and choose animation under keyframes.

The value should be somewhere close to 3500 ms, but you probably won’t go wrong if you set it to start at 3000 ms.

Duration

The duration of your Slider Revolution exit animation depends on the effect you are trying to achieve. Logically, if you don’t want your layer to disappear too soon, you must enter a higher value. If you have several layers, you can experiment with different duration values. However, if you only have a few layers, it’s probably best to go with the larger duration values, so the layers stay on your page for a while before they disappear. This way, you make sure that your visitors have enough time to absorb the information presented in the layers.

Animation Type

For example, your visible animation Short-Bottom-Bottomit’s best to use the opposite type for your exit animation, for example Short-Top or Long-Ball. You don’t want your layers to come out the same way they came from.

As a result

Exit animations can be a valuable addition to your pages, but not always and at all costs. Today, we’ve discussed some factors you might want to keep in mind when creating your exit animations. Additionally, these factors can help you decide whether to use this type of animation.

Also note that you don’t need to use exit animations on all of your layers. You can combine your animations and, for example, use animations that appear in several layers, exit animations in several other layers, and have several static layers as well.