EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30
EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30
BACK TO TOP

How to Add an Exit Animation in Slider Revolution

How to Add an Exit Animation in Slider Revolution

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

When it comes to sliders, appearing animations are a classic feature. In fact, these first-impression animations are among the top reasons for the popularity of the Slider Revolution plugin, since it’s very easy to create them, and they always turn out looking nice and natural.

Appearing animations are, as the name suggests, animated layers that appear or come into the slide, as in the example from the Aoki theme.

Aoki theme animations

But, besides the appearing animations, there’s another important type of animation that can get you a long way – exit animations. As you can see from the example below, these animations feature layers that exit or disappear from the slide. They may not be as popular as appearing animations, but in some cases they can be extremely useful in giving your slider that perfect final touch and leaving your visitors with a strong positive impression.

Appearing animations

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

The Number of Slides

This is fairly obvious but it doesn’t hurt to reiterate it: exit animations only work for sliders that have more than one slide, especially if you plan to have them on all layers. Adding an exit animation to a single slide will leave you with a blank page once the animations are done, and nobody wants to see a blank page. So, in order to use exit animations, you need to have more than one slide.

Background Color

If your background color is white, you should be careful with the exit animations. Besides looking clean, the white background might also give the slider a somewhat empty look. If you don’t have to, avoid using exit animations on a white background.

Frame Start

The average slide duration should be somewhere between 3000 and 4000 milliseconds. Let’s say that the duration of your slide is 3500ms. If you want your exit animation to look natural, it shouldn’t start too early. To set its frame start, go to Layer Options > Animation and select Anim To under Keyframes.

Frame Start

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

Anim To

Duration

The duration of your Slider Revolution exit animation depends on the effect you’re trying to achieve. Logically, if you don’t want your layer to disappear too early, you should insert a higher value. If you have a number of layers, you can experiment with different duration values. But, if you only have a few layers, it’s probably best to go with larger duration values, so the layers stay on your page for a bit before disappearing. That way you’re making sure your visitors have enough time to soak in the information presented on the layers.

Duration

Animation Type

If your appearing animation is, for example, Short-From-Bottom, it’s best to use the opposite type for your exit animation, such as Short-To-Top or Long-To-Top. You don’t want your layers exiting from the same side they came in from.

Animation Type
Themes with Slider Revolution
WebOn banner
WebOn

Landing Page WordPress Theme

Borgholm Marketing WP Theme
Borgholm

Marketing Agency Theme

Sante banner
Santé

Organic Shop Theme

In Conclusion

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

Also, note that you don’t have to use exit animations on all of your layers. You can combine your animations and, for example, use appearing animations on a couple of layers, exit animations on a couple of others, and have a few static layers too.

Post your comment

Comments0