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.
12 Responses
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?
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.
Hello, I used it on the new Elementor Carousel widget, but it didn't work.
Do I need to do something else please?
Hey Isaac!
I just made a small code update, could you import the code again and let me know if it works now?
Ok, let me try and let you know, thanks
Thank you for the update Maxime, it works well on any other slide excerpt the first one.
I don't understand why.
Could you share your URL with me please?
https://handylilly.big-graphics.com/home/
You gave the class "entranceAnimSupport" to that first container that's in fact one of the slide (not just the parent element which does need that class).
Try removing it from the container, let me know if that helps
Oh yes, it didn't work the first time, that's why I added the class to the first one to see if it will work, now I've removed it, but the issue is still there.
Alright. I had a good look and can't really find why it's not working on the first slide.
Well I know why: the data-settings JSON string gets modified on that first slide's animated elements and the animation information is removed. I don't know what is modifying it in that way though...
Try this: place your slider lower down on your page. Is it fixing it?
Try disabling other plugins and Elementor addons. Does it gets fixed?
Cheers!
Thank you, everything is working now, it was an issue caused by Wp Meteor, the setting "Run Elementor Entrance Animations in view".
A small issue now, is that the second phase of animations has a different delay, I don't know if we can reduce that delay in the code. But anyway, it's working, that's the most important thing. Thanks