Elementor Replay Entrance Animations In Carousels and Sliders

Elementor Replay Entrance Animations In Carousels and Sliders

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.

 

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply