Get Premium

Elementor Replay Entrance Animations Each Scroll Down

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

Table of Contents

In this tutorial, I will show you how to get the Elementor entrance animations to play out again, each time the users is scrolling down.

Optionally, you could even enable this for when the user is scrolling back up, however I think it's not very good UX in almost every case. So we will be focusing on repeating the entrance animations on scroll down.

See the demo here:

I used CSS Scroll Snap in this demo, as I think the UI UX is actually improved here, by having the animations play on each scroll down.

I learned a lot about CSS Scroll snap while making that demo page, along with how to improve Elementor's limited integration. I wrote a tutorial about this: Elementor CSS Scroll Snap: How To Optimize For UX.

In this demo, I also used my Elementor entrance animations improved stylesheet.

You will need to consider carefully if for your particular project, the UI/UX is actually improved by repeating animations. Be careful not to annoy users needlessly.

Features:

  • Works with all the native Elementor Entrance animations
  • Plug and play
  • Template file of the demo included*
  • Possible to exclude some elements from replaying
  • Easy to replicate: copy paste the code, et voila!

*For the template, you will need the feature "Container" to be enabled under Elementor > Experiments > Container. The template uses the new Container element. This is only for the template. The entrance animations replays regardless of if you are using sections or containers. The template is fully optional, and I'm sharing it as some might find it nice and a good starting point for some project.

I also tried to improve a little bit the "trigger timing".

Normally with Elementor, as soon as the element is 1px in the viewport, it starts playing out. So very often, the entrance animations end up playing partially or fully out of view. Not great. That's a flaw with Elementor's system.

I changed this so that the entrance animation starts playing out when 40% of the element is in view. In my demo above, it's hard to see because of the scroll snapping.

Switch to the mobile version of the page by clicking the little mobile icon in the top right of the iframe. Scroll snapping is disabled on mobile, and you will see how well 40% in view works.

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 and download the template.

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Replay Entrance Animations Each Scroll Down
  • 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

5 Responses

  1. When this code is embedded in a page it actually makes all the elements animate again. But the problem is with the popup. If you want to embed an element in a popup so that it animates when you run the popup, the element that contains the animation does not display on the popup at all.

    1. I really like to build various page elements on popups especially menus and unfortunately it is a major problem for me when I cannot give animation to any element.

    2. Greetings Witold,

      Would you have a page URL that I could look at?

      What you describe is exactly what is supposed to happen with this tutorial: All the elements on the page should animate again on each scroll down.

      Are you saying there is a problem that when you add the code in this tutorial, then the animations in the popups stop working?

      If so yes please share your URL with me I will check.

      Thanks

  2. Hi Maxime,

    First of all thanks for this. I was wondering if it may be possible to use this kinda the other way round? Like instead of excluding some elements to not be replayed, better only use this option on specific elements? In fact I want to use it on one specific animation only so it would be much easier to control if I'm able to decide where to use the replay option rather than having the need to go through all elements and exclude them with the class name you provided.
    Is there such a way?

    Thanks,
    Lukas

    1. Greetings Lukas!

      Yes, replace this line:

      let dataSettingsElems = document.querySelectorAll('.animated[data-settings*="animation"]:not(.no-anim-repeat), .elementor-invisible[data-settings*="animation"]:not(.no-anim-repeat)');

      With this:

      let dataSettingsElems = document.querySelectorAll('.repeat-entrance-anim.animated[data-settings*="animation"], .repeat-entrance-anim.elementor-invisible[data-settings*="animation"]');

      And then give the class name 

      repeat-entrance-anim

      To the elements that you want to have a repeating entrance animation.

      Cheers!

Leave a Reply