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.
5 Responses
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.
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.
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
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
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
To the elements that you want to have a repeating entrance animation.
Cheers!