GSAP Extensions Animation Extension for Elementor Estimated reading: 14 minutes 57 views What if every scroll, click, and hover could tell a story? The Animation Extension for Elementor makes it easy to add beautiful, fluid animations to your WordPress site — no technical skills required. Highlight important sections, make your CTAs pop, and add that extra wow factor your visitors won’t forget. Curious? Let’s explore what’s possible. What You Will Need Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Animation Go to your WordPress dashboard. Click on Animation Addons. Head to the Extension tab. Under Scroll Smoother, toggle on Animation. Key Features Fade + Ease Options Add smooth and dynamic entrance effects with easing styles like Power2.out, Bounce, Back, Elastic, Slowmo, Stepped, Sine, and Expo. 3D Motion Styles Create dynamic visuals by combining 3D movement and diverse easing effects to add depth and motion. Scroll Motion Controls Control scroll speed and delay to create a scrolling experience that’s either smooth or snappy, matched to your design style. Reverse & Smooth Easing Use dramatic overshoot or slow-motion effects for a cinematic touch and visual emphasis. High-Impact Out Easing Designed for smooth yet powerful departures—it accelerates rapidly and lands softly. Bounce & Elastic Effects Animate with a cheerful bounce or spring effect to enhance fade and 3D movements. Backward & Slow Ease Highlight key visuals with dramatic overshoot or slow-motion effects. Sine Ladder Easing Turn on Stepped for discrete frame motions and Sine for fluid, wave-like animation. Step-by-Step Guide: Understanding Animation Functionality Once the animation setup is complete, proceed to select an element to apply effects. Step 1: Choose Your Element First and foremost, select any element within the container to which you want to add effects. For example, I’ll select an image, but you can choose any other element, such as text, headings, buttons, icons, navigation menus, and more. Then, click on the “Advanced” tab. Step 2: Set the Animation Effect Next, click on the ‘Animation’ section. Here, you will find three options: None, Fade Animation, and 3D Move. If you select ‘None,’ no effect will appear on your website. However, if you choose either of the other two options, you’ll be able to control how your image appears on the website and what type of effect it displays. Let’s first take a moment to understand each function one by one. Fade Animation For example, I will start with Fade In functionality. Enable On Editor Here, you will first notice the “Enable on Editor” option. This helps you instantly preview your element’s animation directly in the editor. If you set it to “Yes”, the animation will play in the editor just like it does on the live page. However, if you keep it “Off”, the element will remain static in the editor. This does not disable or remove the animation from the live site. In short, this option gives you a quick idea of how your elements will animate on the front end. Delay The delay controls how long the animation waits before starting after the element loads. For example, if I set the delay to 0.15 seconds, the animation will begin 0.15 seconds after the element appears. Since I’ve applied the ‘Fade from Bottom’ effect with the ‘Power2.out’ easing, the animation will slide up from the bottom within 0.15 seconds. Note: You can choose any delay value that best suits your preference. Animation On Scroll Animation on Scroll is a cool feature! Instead of triggering animations when the page loads, it waits until the user scrolls to a specific element. As a result, elements like text, images, or sections can appear, move, fade, zoom, or transform when they enter the viewport. However, if you set it to ‘off’, the element will appear instantly and remain static. Fade From “Fade From” makes an element fade in and slide into view from the top, bottom, left, or right as you scroll. It’s great for headers, sections, images, or call-to-action blocks that you want to ease in smoothly. Top: If you select ‘Top’ in the Fade From section, the target element will fade in from the top of the website. Bottom: Next, if you choose ‘Bottom’, then your specific element will appear from the bottom of the website. Left: If you select ‘Left’ in the Fade From section, your element will appear from the left side of the website Right: Selecting ‘Right’ makes the element appear from the right side of the site. In: If you select ‘In’, the element will fade into view from a fully transparent state. Zoom: Selecting ‘Zoom’ makes your element appear with a zoom-in effect on the website. Duration The duration controls how long the animation takes to complete once it starts. For example, if I set the duration to 1.5 seconds, the animation will take 1.5 seconds to finish after it begins. Since I’ve applied the ‘Fade from Zoom’ effect with the ‘Power2.out’ easing, the element will zoom in from the bottom and fade in completely over those 1.5 seconds.Note: You can adjust the duration to make the animation feel faster or slower, depending on the effect you want to achieve. Ease Power2.out: Power2.out is an easing style that helps your element move quickly at first, then slow down smoothly, giving the motion a more natural, polished feel. To apply it, select Ease> Power2.out. Bounce: The Bounce effect gives your element a playful bounce as it settles into place, making the animation feel lively and full of energy. To apply it, select Ease> Bounce. Back: The Back effect makes your element move slightly past its final position before bouncing back, giving it a smooth and natural feel. To apply it, select Ease> Back. Elastic: The Elastic effect makes your element stretch out and then snap back, giving it a fun, bouncy feel that adds energy to the animation. To apply it, select Ease> Elastic. Slowmo: The SlowMo effect makes your animation start quickly, slow down in the middle, and then speed up again—kind of like a dramatic pause that grabs attention and adds a cinematic touch. To apply it, select Ease> Slowmo. Stepped: The Stepped effect makes the animation move in little jumps instead of smoothly, giving it a choppy, stop-motion style look. To apply it, select Ease> Stepped. Sine: The Sine effect makes an element move in a smooth, wavy motion, creating a soft and natural feel. To apply it, select Ease> Sine. Expo: The Expo effect gives your animation a fast, powerful start, then slows down smoothly, creating a dramatic burst of motion that finishes gently. To apply it, select Ease> Expo. Fade Offset Fade Offset lets you make your element appear from a 50-degree angle or any angle you choose on your site. For example, since I set the Fade Offset to 50, the element appears from a 50-degree angle on the page. BreakPoint This feature lets you preview your animation on different devices, such as mobile portrait or tablet portrait, so you can choose the best option for your needs. Mobile Portrait: It ensures your site looks good on smaller screens in portrait mode. Tablet Portrait: This setting helps you adjust how your website looks on tablets in portrait mode, ensuring it looks great on vertical tablet screens. Enable Scroll Smoother Turning on “Enable Scroll Smoother” makes your website scroll more smoothly and gives it a cleaner, more polished look, especially when you’re using scroll-based animations. It also helps create a modern and professional feel for your website. Speed: The speed setting lets you control how fast or slow the scroll animation feels compared to the actual scrolling. Lag: The “Lag” setting in Enable Scroll Smoother lets you control how long it takes for the smooth scroll effect to start, after you begin scrolling. 3D Move Below is the guideline for the 3D move functionality. Enable On Editor Here, you will first notice the “Enable on Editor” option. This helps you instantly preview your element’s animation directly in the editor. If you set it to “Yes”, the animation will play in the editor just like it does on the live page. However, if you keep it “Off”, the element will remain static in the editor. This does not disable or remove the animation from the live site. In short, this option gives you a quick idea of how your elements will animate on the front end. Delay The delay controls how long the animation waits before starting after the element loads. For example, if I set the delay to 0.16 seconds, the animation will begin 0.16 seconds after the element appears. Since I will select ‘Rotation Direction Y’ and ‘Power2.out’ from the Ease section, the image element will trigger a 3D scroll animation on the website, sliding up in 0.16 seconds due to the applied ‘Power2.out’ easing. Note: You can choose any delay value that best suits your preference. Animation On Scroll Animation on Scroll is a cool feature! Instead of triggering animations when the page loads, it waits until the user scrolls to a specific element. As a result, elements like text, images, or sections can appear, move, fade, zoom, or transform when they enter the viewport. However, if you set it to ‘off’, the element will appear instantly and remain static. Duration The duration controls how long the animation takes to complete once it starts. For example, if you set it to 1.5 seconds, the 3D scroll effect—triggered by selecting ‘Rotation Direction Y’ and ‘Power2.out’ from the Ease section—will take exactly 1.5 seconds to finish. Note: You can set any value for the duration to control how fast or slow the 3D movement feels, based on the experience you want to create. Ease Power2.out: Power2.out makes your 3D element move quickly at first, then ease into a smooth slowdown, creating a natural flow that adds depth and a polished touch to your animation. To apply it, select Ease> Power2.out. Bounce: Bounce makes your 3D element land with a playful bounce, adding a fun, energetic feel as it settles into place and brings your animation to life. To apply it, select Ease> Bounce. Back: Back makes your 3D element move slightly past where it’s supposed to go, then gently return, creating a smooth and natural animation. To apply it, select Ease> Back. Elastic: The Elastic effect makes your 3D element go past its final position and then bounce back, creating a fun, bouncy movement that adds energy to the animation. To apply it, select Ease> Elastic. Slowmo: The SlowMo effect makes your 3D animation start fast, slow down in the middle, then speed up again—like a dramatic pause that grabs attention and adds a cinematic, dynamic feel to your motion. To apply it, select Ease> Slowmo. Stepped: The Stepped effect makes your 3D animation move in small jumps instead of a smooth flow, creating a choppy, stop-motion look that stands out. To apply it, select Ease> Stepped. Sine: The Sine effect makes your 3D element move in a smooth, wave-like motion, giving the animation a soft, natural feel. To apply it, select Ease> Sine. Expo: The Expo effect makes your 3D element start with a strong, fast burst of motion, then slow down smoothly, creating a bold and dramatic animation that ends gently. To apply it, select Ease> Expo. Rotation Direction Rotation direction in 3D effects is how an element spins around the X and Y axes to create a 3D look. By adjusting these directions, you can make the element appear to move or turn in space, adding depth and perspective. X: The X settings make an element tilt forward or backward, adding depth and a 3D effect. Y: The Y settings let you rotate an element left or right, making it look like it’s turning in 3D. Rotation Value The rotation value sets how much the element turns left, right, forward, or backward—and it’s measured in degrees (°). Since I picked -80 degrees, the element will rotate in the opposite direction—tilting backward on the X axis or turning left on the Y axis, depending on which one I’m using. Note: Feel free to set the rotation value in any degree you prefer. The direction of the spin will change based on whether you use a positive or negative value, so adjust the angle to create the 3D effect you want. TransformOrigin Transform Origin in Elementor’s 3D settings controls where the movement begins. It helps shape how the animation looks by changing the starting point of the effect. Since I set Transform Origin to top center -50, the element will rotate around the top center, but with the pivot point moved 50 pixels backward in 3D space, creating a deeper, more dramatic 3D effect. BreakPoint This feature lets you preview your animation on different devices, such as mobile portrait or tablet portrait, so you can choose the best option for your needs. Mobile Portrait: It ensures your site looks good on smaller screens in portrait mode. Tablet Portrait: This setting helps you adjust how your website looks on tablets in portrait mode, ensuring it looks great on vertical tablet screens. Enable Scroll Smoother Turning on “Enable Scroll Smoother” makes your website scroll more smoothly and gives it a cleaner, more polished look, especially when you’re using scroll-based animations. It also helps create a modern and professional feel for your website. Speed: The speed setting lets you control how fast or slow the scroll animation feels compared to the actual scrolling. Lag: The “Lag” setting in Enable Scroll Smoother lets you control how long it takes for the smooth scroll effect to start, after you begin scrolling. Create a Parallax Effect With Enable Scroll Smoother To add a parallax effect to your image or text, follow the steps below. Click the ‘+’ icon and type ‘Image’ into the search box. Next, click on “Choose Image.” Once you upload an image, click on the ‘Advanced’ tab and select the image element. Now, click on ‘Animation.’ For example, I set the speed to 0.9, but you can set any value as per your choice. Set the Lag to 0 or any as per your choice. Lastly, click the publish button to view the result. Here is the final output below. Lag To apply the lag effect on the Image while scrolling, follow the process below. First, pick an element like an image or text, based on your choice. Next, click on the Advanced tab > Animation > Enable Scroll smoother. Set speed 1, and lag 1.5. Lastly, click the publish button to view the result. Here is the final output below. Final Words The Animation Extension for Elementor offers an easy way to add engaging animations to your WordPress site. By following the simple steps, you can apply various effects like fade-ins, 3D moves, and smooth scroll transitions. Customize each effect’s easing, speed, and lag to create the perfect interactive experience for your visitors. This tool allows you to enhance your site’s design and user experience with dynamic, eye-catching animations. However, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
