V4 Extentions Text Animation Estimated reading: 5 minutes 4 views Animate the letters, words or lines of your text. Pick an effect, pick a trigger, and your headline comes alive. No code needed. WORKS ON Heading, Paragraph, Button EFFECTS 14 text animations PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The animation only plays on the live page when Pro is active. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Animation Extensions, turn on Text Animation. Click Save Settings. Text Animation Extension (click to zoom) STEP 2 Add an Interaction Each text animation is called an interaction. One interaction is one effect plus one trigger. Open your page with the Elementor Editor. Select a Heading, Paragraph or Button. In the General tab, open the Text Animation section. Click the + button next to Interactions. Click the new row to open its options. Text Animation section in the General tab (click to zoom) A new interaction. It starts with Character on scroll (click to zoom) Tip: Click the play button on the row to preview the animation inside the editor. STEP 3 Choose the Effect Open the Animation list and pick an effect. Choose an effect, for example Word. Choose a Trigger, for example On Click. Adjust Delay, Duration and Stagger if you want. Click Update to save your page. The Animation list (click to zoom) SETTINGS Interaction Options Animation Default: CharacterThe text effect. See the full list below. Trigger Default: On ScrollWhat starts the animation: On Page Load, On Scroll, Play With Scroll, On Click, On Hover or On Slide Change. Trigger Selector For On Click and On Hover. Type a class like .my-button or an ID like #my-button to start the animation from another element. Leave it empty to use the text itself. Wrapper Default: DefaultFor scroll triggers. Choose Custom to set your own Start Trigger Selector and End Trigger Selector. Start / End Default: top 85% / bottom 30%For scroll triggers. top 85% means: when the top of the text reaches 85% down the screen. Delay Default: 0.15Seconds to wait before the animation starts. Duration Default: 1How many seconds each piece of text takes to animate. Stagger Default: 0.02The gap between one letter, word or line and the next. A bigger number makes a slower wave. Easing Default: DefaultFor the premium effects. Choose how the motion speeds up and slows down. Transform-X / Transform-Y Default: 20 / 0For Character and Word. How far each piece slides in, in pixels. Markers Default: OffFor scroll triggers. Shows start and end lines on the page, so you can test the positions. Delay, Duration, Stagger and Transform (click to zoom) Extra Options Some effects add their own options. Text Move Rotation Direction (X or Y, default X), Rotation Value (default -80) and Transform Origin (default top center -50). Text Scale Scale (default 1.5), Scale Ease (default Back) and Text Break By: Lines, Words or Chars (default Lines). Text Invert Works with Play With Scroll only. The trigger is set for you. You only choose Start and End. LIBRARY Text Effects Character Each letter slides in one after another. Word Each word slides in one after another. Text Move The text swings in with a 3D turn. Text Reveal The text is revealed line by line. Text Scale The text starts bigger and settles into place. Text Invert A color sweep that follows your scroll, line by line. Premium Effects Origami Fold Letters fold open like paper. Shutter Cascade Letters drop down in a quick wave, like shutters. Typewriter 3D Letters turn in one by one, like a typewriter. Quantum Snap Letters fly in from random places and snap into position. Vortex Unwind Letters spin and grow out of a small size. Matrix Reveal Letters flip in at random, one after another. Cyber Phantom Letters slide in with a colorful ghost shadow. RB Curved Loop Letters float in a gentle wave that repeats. RESULT Final Result Ten of the effects, one by one. In these examples the trigger is On Click, and the GIFs are slowed down so you can see each step. Character Character Word Word Text Move Text Move Text Reveal Text Reveal Text Scale Text Scale Origami Fold Origami Fold Quantum Snap Quantum Snap Matrix Reveal Matrix Reveal Cyber Phantom Cyber Phantom RB Curved Loop RB Curved Loop. It keeps repeating GOOD TO KNOW How It Works Many interactions One text can have many interactions. On Page Load allows one per element. On Scroll and Play With Scroll share one slot. On Hover and On Click are unlimited. Per device The interactions list can be different on desktop, tablet and mobile. Live page only The animation runs on the live page. Inside the editor use the play button on the row. Only loads when used Pages with no interaction do not load any animation script. HELP Troubleshooting I do not see the Text Animation section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Text Animation. Then reload the editor and select a Heading, Paragraph or Button. The animation does not play on my page Pro must be active with a valid license. Update the page and clear your cache. Test on the live page, not in the editor. Text Invert only lets me pick Play With Scroll This is how Text Invert works. It is a color sweep that follows the scroll bar, so no other trigger is offered. Character looks the same as Word on one-word text Both effects split the text into pieces. If your text has only one word, Word has nothing to separate. Use Character instead. You Did It Your text now moves the way you chose. If you face any problem, please contact our support team. We are happy to help.
