Elementor Replay Entrance Animations Each Scroll Down

Elementor Replay Entrance Animations Each Scroll Down

Just Released: 10 Popular Web Hosts Tested In Depth

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

$19/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$239/one timeUse code:
friday_discount
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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
  • Black Friday discount!BFCM discount:

    get 20% off the All Access with coupon code friday_discount

* 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 2701 Elements right here:

Checkout the Elementor Addon Finder directly

3 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

Leave a Reply