Elementor Replay Entrance Animations In Carousels and Sliders

Elementor Replay Entrance Animations In Carousels and Sliders

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this tutorial, I will show you how to get the Elementor entrance animations to replay, each swipe of the carousel or slider.

This works particularly well for the "Slides" element from Elementor Pro, where you entered a template shortcode into the "slide description" field.

See the demo here:

Features:

  • Works with all the native Elementor Entrance animations
  • Works with all the carousels and sliders from Elementor (Slides, testimonials carousel, reviews carousel)
  • Works when one slide is shown at a time**

**Essentially the way the code work, is that the active slide will play out the entrance animation. If you show 3 slides per view, a quirk of the Swiper.JS library is that only one of them will be 'active', or to be technical, have the '.swiper-slide-active' class name. So the other two slides aren't active, and the elements with entrance animations would not be shown.

It works for all sliders made with Elementor, where templates shortcode are used in the content. All the entrance animations need to be made using the Advanced > Motion Effect > Entrance animation option for this to work.

It will also work with sliders made form CPT loops and ECS post slider, or Dynamic.ooo loop and showing the posts as a slider.

Here is an example of that (scroll down a bit to see the slider):

(Don't have Dynamic.ooo yet? Get an exclusive discount here)

It probably won't work with entrance animations from addons, unless they use the exact same system as Elementor.

Let's get started!

First, copy paste this code in a new Code Snippet

This is a premium tutorial. Purchase access to unlock the full tutorial.

 

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

2 Responses

  1. I am using Plus Addons which has a Carousel Anything widget. You can just choose a template for each slide. But of course the entrance animations do not play each time. Can you help me get it to work like you are describing here?

    1. Sorry Shae, this is coded to work very specifically with sliders that use the Swiper.JS library. This includes all those from Elementor free and Pro, as well as those from some addons like Dynamic.ooo, Powerpack and Qi addons.

      To code this to work with slick slider (what The Plus uses) is a lot of extra work, and then there are twice the complexity to take care of and upkeep.. And that would be only for The Plus. Just about every other addon uses a different slider library, so to make it compatible with all of them is well beyond the intended scope of this tutorial.

      I can offer a refund if you would like.

Leave a Reply