Elementor Replay Entrance Animations In Carousels and Sliders
Get Premium

Elementor Replay Entrance Animations In Carousels and Sliders

Element.How also offers premium tutorials! Check them here:

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 new Carousel element from Elementor Pro, where you can add any element directly within each slide.

It also works really well with a Loop Carousel element.

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***), but ideal for the new Carousel and Loop Carousel elements
  • 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.

***In addition to the Carousel and Loop Carousel elements, it works for all sliders made with Elementor, where templates shortcode are used in the content.

It will also work with sliders made a Dynamic.ooo loop and showing the posts as a slider. The exact same could now be done with the Loop Carousel element too.

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

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.

Elementor Replay Entrance Animations In Carousels and Sliders

Access tutorial

$19/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Replay Entrance Animations In Carousels and Sliders
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

12 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.

      2. Thank you for the update Maxime, it works well on any other slide excerpt the first one.
        I don't understand why.

    1. 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

      1. 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.

      2. 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!

      3. 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

Leave a Reply