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.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
