GSAP Extensions Text Animation Estimated reading: 19 minutes 34 views Text alone can’t always grab attention—but with animation, it can. Whether you want a smooth entrance, a bold move, or a subtle scale effect, the Text Animation feature in Animation Addons helps you make your content more dynamic and eye-catching. It’s perfect for creating rhythm, drawing attention, or adding a creative touch to any headline or block of text—all without writing a single line of code. Requirement 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 Text Animation Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Under ScrollSmoother, toggle on Text Animation. Step 1: Pick an Element and Choose an Animation First, select the specific element you want to apply the text animation to. Once you’ve selected the element, click on ‘Text Animation’. In the Animation settings, you’ll see a variety of effect options, including None, Character, Word, Text Move, Text Reveal, Text Scale, Text Invert, and 3D Spin. Simply choose the effect that best suits your design needs. Enable On Editor After that, you’ll see the ‘Enable’ option. To preview your animation inside the editor, you need to turn this on using the “Enable On Editor” setting. If you switch it to “Yes”, the animation will play right in the editor, just like it would on your actual website. But if you leave it “Off“, the element won’t animate in the editor—it’ll just stay still. Don’t worry, though, the animation will still work perfectly on your live site. In short, this setting lets you see how your animation looks while you’re working on your page. For example, I started with the ‘Character’. The settings for ‘Character’ and ‘Word’ are actually the same, so you can choose either one based on your preference. Character Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Delay In the delay settings, you can choose how long to wait before the animation begins. For example, I’ve set it to 0.5 seconds, which means the animation will start half a second after the page or element loads. However, you can adjust this value based on your preference. Duration The duration setting controls how long the animation takes to complete from start to finish. For example, I’ve set it to 2 seconds, so the animation will take that amount of time to fully play. You can adjust this value based on your preference. Stagger Stagger sets a delay between the animations of each element. Since I set the stagger value to 0.02 seconds, each letter, word, or line animates 0.02 seconds after the previous one, creating a smooth, wave-like effect. You can adjust this value to whatever you prefer. Animation On Scroll The Animation on Scroll setting makes your text animate only after it comes into view during scrolling. This helps your page feel more active and interesting. If this option is turned on, the animation starts as soon as the text appears on the screen while scrolling. If it’s turned off, the animation starts right away as the page loads, even if the text is not visible yet. For example, I have this option turned on, but you can choose whatever works best for your layout. Transform-X Transform-X moves the text from side to side on the screen. I set the Transform-X value to 20, so the text starts 20 pixels to the right and then slides back to its original spot. However, you can adjust the value based on your preference. Transform- Y Transform-Y setting moves the text up or down on the screen. For example, if you set it to 50, the text will start 50 pixels lower than its original spot and then move upward into place. In my case, I didn’t change anything—I left it at 0. Scrub In Scrub settings, if you turn on the animation will move smoothly in sync with your scrolling. However, if you turn it off, then the animation plays automatically once the element enters the viewport, regardless of how much or how fast you scroll. In my case, I just keep it off, but you can turn it on based on your needs. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Final Output of Character However, if you select the ‘Word’ effect, the output will appear as shown below. Step 2: Customize Text Animation Timing & Motion Activate your text animation and adjust timing, rotation, and movement for smooth, dynamic effects. Use scroll triggers and device breakpoints to ensure your animation looks great everywhere. Text Move Enable On Editor ‘Enabling On Editor’ setting follows the same process. Just like you enabled the option for ‘Character’, you can do the same for the rest of the effect settings. Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Delay In the delay settings, you can choose how long to wait before the animation begins. For example, I’ve set it to 0.2 seconds, which means the animation will start shortly after the page or element loads. However, you can adjust this value based on your preference. Duration The duration setting determines how long the animation takes to run from beginning to end. For example, I set it to 4 seconds, and that means the animation will take exactly 4 seconds to complete. In addition, you can adjust this value based on your preference. Stagger Stagger sets a delay between the animations of each element. Since I set the stagger value to 0.01 seconds, each letter, word, or line animates 0.01 seconds after the previous one, creating a fast, wave-like effect. However, you can adjust this value to whatever you prefer. Animation On Scroll The Animation on Scroll setting allows your text to animate only after it comes into view during scrolling, making your page feel more dynamic and engaging. If this option is enabled, the animation starts once the text appears on screen while scrolling. If disabled, the animation plays immediately as the page loads, even if the text hasn’t entered the viewport yet. For example, I have this option enabled, but you can choose whichever setting works best for your layout. Rotation Direction Rotation Direction offers two options: X and Y. Choosing X makes the text rotate around the X-axis during the animation. On the other hand, selecting Y causes the text to rotate left or right, like a door swinging open. For example, I selected X, but you can choose either option based on your design needs. Rotation Value Rotation Value defines how much the text will rotate during the animation. Since I set the rotation value to -90, the text will rotate backward 90 degrees along the selected X-axis. Transform Origin Transform Origin is the point where your text starts to spin, grow, or move from.For example, I set it to Bottom right 20, which means the animation begins from a spot just above the top center of the text. You can adjust this value however you like, depending on the effect you want. Top center -50: Choosing “Top center -50” will shift the position 50 pixels above the top center. Bottom right 20: Choosing “Bottom right 20” will shift the position 20 pixels below the bottom right corner. Center Left 30: Choosing “Center left 30” will shift the position 30 pixels to the right of the center left. Center center 0: Choosing “Center center 0” will keep the position exactly in the center (default). 50% 50%: Choosing “50% 50%” will keep the position exactly at the center. 0% 0%: Choosing “0% 0%” will keep the position at the top left. 100% 100%: Choosing “100% 100%” will move the position to the bottom right corner. Scrub In Scrub settings, if you turn on the animation will move smoothly in sync with your scrolling. However, if you turn it off, then the animation plays automatically once the element enters the viewport, regardless of how much or how fast you scroll. In my case, I just keep it off, but you can turn it on based on your needs. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Final Output of TextMove Step 3: Set Timing & Triggers Adjust the animation’s timing and triggers to control when your text appears and how smoothly it moves. You can also set it to activate on scroll and fine-tune its behavior across devices for a seamless experience. Text Reveal Enable On Editor ‘Enabling On Editor’ setting follows the same process. Just like you enabled the option for the previous one, you can do the same for the rest of the effect settings. Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Delay In the delay settings, you can choose how long to wait before the animation begins. For example, I’ve set it to 0.5 seconds, which means each part of the text will animate one after another, creating a smooth staggered effect shortly after the page or element loads. However, you can adjust this value based on your preference. Duration The duration setting determines how long the animation takes to run from beginning to end. For example, I set it to 2 seconds, and that means the animation will take exactly 2 seconds to complete. In addition, you can adjust this value based on your preference. Stagger Stagger sets a delay between the animations of each element. Since I set the stagger value to 0.01 seconds, each letter, word, or line animates 0.01 seconds after the previous one, creating a fast, wave-like effect. However, you can adjust this value to whatever you prefer. Animation On Scroll The Animation on Scroll setting allows your text to animate only after it comes into view during scrolling, making your page feel more dynamic and engaging. If this option is enabled, the animation starts once the text appears on screen while scrolling. If disabled, the animation plays immediately as the page loads, even if the text hasn’t entered the viewport yet. For example, I have this option enabled, but you can choose whichever setting works best for your layout. Scrub In Scrub settings, if you turn on the animation will move smoothly in sync with your scrolling. However, if you turn it off, then the animation plays automatically once the element enters the viewport, regardless of how much or how fast you scroll. In my case, I just keep it off, but you can turn it on based on your needs. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Final Output of Text Reveal Step 4: Text Scale Control The Text Scale animation lets you change how big or small the text gets, when the animation starts, and how it moves. You can set the delay, duration, stagger, easing, and scroll options to make the animation look good on any device. Text Scale Enable On Editor ‘Enabling On Editor’ setting follows the same process. Just like you enabled the option for the previous one, you can do the same for the rest of the effect settings. Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Delay In the delay settings, you can choose how long to wait before the animation begins. For example, I’ve set it to 0.3 seconds, which means each part of the text will appear one after another, with a smooth and slightly faster effect shortly after the page or element loads. However, you can add the value based on your preference. Duration The duration setting determines how long the animation takes to run from beginning to end. For example, I set it to 3 seconds, and that means the animation will take exactly 3 seconds to complete. In addition, you can adjust this value based on your preference. Stagger Stagger sets a delay between the animations of each element. Since I set the stagger value to 0.01 seconds, each letter, word, or line animates 0.01 seconds after the previous one, creating a fast, wave-like effect. However, you can adjust this value to whatever you prefer. Animation On Scroll The Animation on Scroll setting allows your text to animate only after it comes into view during scrolling, making your page feel more dynamic and engaging. If this option is enabled, the animation starts once the text appears on screen while scrolling. If disabled, the animation plays immediately as the page loads, even if the text hasn’t entered the viewport yet. For example, I have this option enabled, but you can choose whichever setting works best for your layout. Scrub In Scrub settings, if you turn on the animation will move smoothly in sync with your scrolling. However, if you turn it off, then the animation plays automatically once the element enters the viewport, regardless of how much or how fast you scroll. In my case, I just keep it off, but you can turn it on based on your needs. Ease Power2.out: Power2.out makes the element move fast at the beginning and then slow down at the end, making the movement look smooth and real. To apply it, select Ease> Power2.out. Bounce: The Bounce effect makes your element jump a little before stopping, which makes the movement look fun and full of energy. To apply it, select Ease> Bounce. Back: The Back effect moves your element a bit too far and then pulls it back to where it should stop, making the movement look smooth and real. To apply it, select Ease> Back. Elastic: The Elastic effect makes your element pull out and then quickly go back, like a rubber band, which makes the movement look fun and full of energy. To apply it, select Ease> Elastic. Slowmo: The SlowMo effect makes your animation go fast at first, slow down in the middle, and then speed up again. It feels like a pause that catches your eye and makes the movement more interesting. To apply it, select Ease> Slowmo. Stepped: The Stepped effect makes the animation move in little jumps instead of going smoothly, so it looks like stop-motion. To apply it, select Ease> Stepped. Sine: The Sine effect makes an element move back and forth smoothly, like gentle waves, so it feels soft and natural. To apply it, select Ease> Sine. Expo: The Expo effect makes your animation start fast and strong, then slow down smoothly, ending with a soft finish. To apply it, select Ease> Expo. Scale Scale settings change the size of the text. It makes the text grow bigger or smaller during the animation. Since I set the scale to 1.5, the text will grow to one and a half times its original size during the animation. However, you can set any value based on your preference. Text Break By Lines: It will split the text into lines, just like how they look on screen, and add animation to each line one by one. Words: It will split the text into words, then show an animation for each word, one at a time. Chars: It will split the text into letters and show an animation for each letter, one after another. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Final Output of Text Scale Step 5: Text Flip & 3D Twist Transform ordinary text into eye-catching motion with powerful settings like Play Animation, Scroll Effects, and Breakpoints. From smooth delays to scroll-triggered movement, every detail is yours to customize. Create dynamic, responsive animations that feel as polished as they look. Text Invert Enable On Editor ‘Enabling On Editor’ setting follows the same process. Just like you enabled the option for the previous one, you can do the same for the rest of the effect settings. Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Text Invert reverses the text’s color and background — for example, black text on a white background becomes white text on a black background. If your background is black, the background behind the text will invert from black to white or a light color, but only within the text area (not the entire section). Final Output of Text Invert 3D Spin Enable On Editor ‘Enabling On Editor’ setting follows the same process. Just like you enabled the option for the previous one, you can do the same for the rest of the effect settings. Play Animation In the Play Animation settings, you’ll find options like ‘Play Now’ to instantly preview your text animation effect. Delay In the delay settings, you can choose how long to wait before the animation begins. For example, I’ve set it to 0.3 seconds, which means each part of the text will appear one after another, with a smooth and slightly faster effect shortly after the page or element loads. However, you can add the value based on your preference. Animation on Scroll The Animation on Scroll setting allows your text to animate only after it comes into view during scrolling, making your page feel more dynamic and engaging. If this option is enabled, the animation starts once the text appears on screen while scrolling. If disabled, the animation plays immediately as the page loads, even if the text hasn’t entered the viewport yet. For example, I have this option enabled, but you can choose whichever setting works best for your layout. Spin Text Color In the Spin Text Color settings, you’ll find options like Primary, Secondary, Text, and Accent. You can choose any color you prefer. For example, I leave it as the default, but feel free to pick the color that suits your style. Start In the Start settings, you’re free to choose any value. For example, I’ve set it to ‘top 50%’, but you can adjust it based on your preference. Since I set the value to ‘top 50%’, the text will start centered vertically (halfway down) inside its container. End In the End settings, you can choose any value. I’ve set it to ‘bottom 30%’, but you can set any value as per your choice. Since I set the value bottom 30%, the animation will finish with the text positioned 30% up from the bottom of its container (so slightly above the bottom edge). Scub In Scrub settings, if you turn on the animation will move smoothly in sync with your scrolling. However, if you turn it off, then the animation plays automatically once the element enters the viewport, regardless of how much or how fast you scroll. In my case, I just keep it off, but you can turn it on based on your needs. toggleAction In toggleActions, you can set values like ‘play none none reverse’, ‘play reverse play reverse’, ‘play none none none’, ‘restart none none none’, or ‘play reset play reset’. For example, I’ve set it to ‘play none none reverse’, but you can choose any combination based on your desired animation behavior. Breakpoint In breakpoint settings, you can control how the animation behaves on different devices, allowing you to enable, disable, or adjust the animation specifically for desktop, tablet, or mobile screens. It has options like All. Mobile Portrait. Mobile Landscape. Tablet Portrait. Tablet Landscape. Laptop. For example, I pick ‘All’, but you can select anything based on your preference. Final Output of 3D Spin You Did It You have successfully unlocked the power to enhance your designs with the Text Animation Extensions. These tools help you create smooth, engaging animations that draw attention and improve your website’s design. By adjusting effects, timing, and triggers, you can make your text more dynamic and eye-catching. Additionally, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
