Dynamic Scrolling Motion Effects in Elementor
User experiences can vary greatly depending on the amount of design effort put into a website. Using custom animation to reveal important information draws users’ eyes to focus on key elements. This not only highlights the areas you want to focus on more but also creates a memorable and immersive interaction that boosts engagement.
Creating a beautiful website isn’t just about making everything look good. Aesthetics can get the attention of visitors but to transform a passive reading experience into an active one, adding unique text animations will make the experience more compelling. This enhances readability and emphasizes your most important points, allowing your message to resonate with your audience.
Follow this tutorial to create a text animation effect that will fade in as you scroll down the page. Check the tips at the end to learn how to add this effect to globally on a custom class and use it throughout your site. This tutorial uses JavaScript with GSAP and CSS, but is very easy to use.
Example
Dynamic Fading Header
Code Tutorial
Step 1. Add a title & class
Start by adding a title to your page, add the class of .ltg-blur-fade-title. This goes inside of the advanced tab in the CSS Classes box.
ltg-blur-fade-title
Step 2. Add the Script
Add an HTML element to the page and copy this script into it. This can be added anywhere on the page.
<script src="https://phillyswebsitedesign.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZ3NhcC8zLjEyLjIvZ3NhcC5taW4uanM=" defer data-deferred="1"></script> <script src="https://phillyswebsitedesign.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZ3NhcC8zLjEyLjIvU2Nyb2xsVHJpZ2dlci5taW4uanM=" defer data-deferred="1"></script> <script src="data:text/javascript;base64,ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigiRE9NQ29udGVudExvYWRlZCIsKCk9Pntnc2FwLnJlZ2lzdGVyUGx1Z2luKFNjcm9sbFRyaWdnZXIpO2NvbnN0IHRpdGxlcz1kb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCIubHRnLWJsdXItZmFkZS10aXRsZSIpO3RpdGxlcy5mb3JFYWNoKHRpdGxlPT57aWYodGl0bGUuZGF0YXNldC5nc2FwUHJvY2Vzc2VkKXJldHVybjtjb25zdCB3cmFwV29yZHNJblRleHROb2Rlcz0obm9kZSk9PntpZihub2RlLm5vZGVUeXBlPT09Myl7Y29uc3Qgd29yZHM9bm9kZS50ZXh0Q29udGVudC5zcGxpdCgvKFxzKykvKTtjb25zdCBmcmFnPWRvY3VtZW50LmNyZWF0ZURvY3VtZW50RnJhZ21lbnQoKTt3b3Jkcy5mb3JFYWNoKHdvcmQ9PntpZih3b3JkLnRyaW0oKS5sZW5ndGg9PT0wKXtmcmFnLmFwcGVuZENoaWxkKGRvY3VtZW50LmNyZWF0ZVRleHROb2RlKHdvcmQpKX1lbHNle2NvbnN0IHNwYW49ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic3BhbiIpO3NwYW4udGV4dENvbnRlbnQ9d29yZDtzcGFuLmNsYXNzTGlzdC5hZGQoImx0Zy13b3JkIik7ZnJhZy5hcHBlbmRDaGlsZChzcGFuKX19KTtub2RlLnJlcGxhY2VXaXRoKGZyYWcpfWVsc2UgaWYobm9kZS5ub2RlVHlwZT09PTEpe0FycmF5LmZyb20obm9kZS5jaGlsZE5vZGVzKS5mb3JFYWNoKHdyYXBXb3Jkc0luVGV4dE5vZGVzKX19O3dyYXBXb3Jkc0luVGV4dE5vZGVzKHRpdGxlKTt0aXRsZS5kYXRhc2V0LmdzYXBQcm9jZXNzZWQ9ITA7Y29uc3Qgd29yZFNwYW5zPXRpdGxlLnF1ZXJ5U2VsZWN0b3JBbGwoInNwYW4ubHRnLXdvcmQiKTtnc2FwLmZyb21Ubyh3b3JkU3BhbnMse29wYWNpdHk6MC4zLGZpbHRlcjoiYmx1cig4cHgpIn0se29wYWNpdHk6MSxmaWx0ZXI6ImJsdXIoMHB4KSIsc3RhZ2dlcjowLjIsZWFzZToicG93ZXIyLm91dCIsc2Nyb2xsVHJpZ2dlcjp7dHJpZ2dlcjp0aXRsZSxzdGFydDoidG9wIDkwJSIsZW5kOiJ0b3AgMTAlIixzY3J1YjohMCx9LH0pfSl9KQ==" defer></script>
Step 3. Add the CSS
Add this CSS to the custom css section of the page or inside of an html element wrapped in <style> tags. This can also be added in the advanced tab on the page or element in the Custom CSS section.
<style>.ltg-word {
display: inline-block;
opacity: 0.3;
filter: blur(8px); /* Start blurred */
transition: opacity 0.2s ease;
white-space: pre;
}</style>
Bonus Tip: Add this class globally
In order to make this work across your website, instead of just on the page where you added the code, you will need to add it globally. Start by adding the CSS to the customizer and then add the script into the Elementor custom code area. Set the custom code to load in the headers of the site. Now all you need to do is add the class to any heading you want this effect on and it will load automatically from the global settings.