{"id":8852,"date":"2020-06-28T15:00:46","date_gmt":"2020-06-28T13:00:46","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8852"},"modified":"2022-02-23T10:23:40","modified_gmt":"2022-02-23T09:23:40","slug":"slider-revolution-exit-animation","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-exit-animation\/","title":{"rendered":"How to Add an Exit Animation in Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]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<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]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<\/a>, since it\u2019s very easy to create them, and they always turn out looking nice and natural.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Appearing animations are, as the name suggests, animated layers that appear or come into the slide, as in the example from the Aoki theme<\/a>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Aoki <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]But, besides the appearing animations, there\u2019s 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.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Appearing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]However, there are a few things to keep in mind when creating a Slider Revolution exit animation, and today we\u2019re going to go through them. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Number of Slides<\/h2>\n

[\/vc_column_text][vc_column_text]This is fairly obvious but it doesn\u2019t 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<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Background Color<\/h2>\n

[\/vc_column_text][vc_column_text]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\u2019t have to, avoid using exit animations on a white background<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Frame Start<\/h2>\n

[\/vc_column_text][vc_column_text]The average slide duration should be somewhere between 3000 and 4000 milliseconds. Let\u2019s say that the duration of your slide is 3500ms. If you want your exit animation to look natural, it shouldn\u2019t start too early. To set its frame start, go to Layer Options > Animation<\/strong><\/em> and select Anim To<\/strong> under Keyframes<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Frame <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The value should be somewhere near 3500ms, but you probably won\u2019t go wrong if you set it to start from 3000ms.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Anim <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Duration<\/h2>\n

[\/vc_column_text][vc_column_text]The duration of your Slider Revolution exit animation depends on the effect you\u2019re trying to achieve. Logically, if you don\u2019t want your layer to disappear too early, you should insert a higher value<\/strong>. If you have a number of layers, you can experiment with different duration values. But, if you only have a few layers, it\u2019s probably best to go with larger duration values, so the layers stay on your page for a bit before disappearing. That way you\u2019re making sure your visitors have enough time to soak in the information presented on the layers.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Duration\" <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Animation Type<\/h2>\n

[\/vc_column_text][vc_column_text]If your appearing animation is, for example, Short-From-Bottom<\/strong><\/em>, it\u2019s best to use the opposite type for your exit animation, such as Short-To-Top<\/strong><\/em> or Long-To-Top<\/strong><\/em>. You don\u2019t want your layers exiting from the same side they came in from.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Animation <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]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. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Also, note that you don\u2019t 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<\/a> too.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Find out how to make the best of each Slider Revolution exit animation and ensure your slides leave a lasting impression on viewers.<\/p>\n","protected":false},"author":6,"featured_media":8859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8852"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8852\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8859"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}