V4 Extentions Regular Animation Estimated reading: 8 minutes 5 views Animate any element when the page loads, when it scrolls into view, or when a visitor hovers or clicks it. Pick one of 22 ready animations, or build your own. WORKS ON Any V4 element TRIGGERS Scroll, Load, Hover, Click 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 Regular Animation. Click Save Settings. Regular Animation Extension (click to zoom) STEP 2 Add an Interaction Each animation is called an interaction. One interaction is one trigger plus one animation. Open your page with the Elementor Editor. Select any V4 element, for example a Heading. In the General tab, open the Animation section. Click the + button next to Interactions, or click + Add Interaction. Click the new row to open its options. Animation section in the General tab (click to zoom) A new interaction. It starts with Classic Fade Up on scroll (click to zoom) Tip: Click the play button on the row to preview the animation inside the editor. STEP 3 Choose the Animation Pick a ready animation from the Animation list. The From and To properties fill in for you. Open the Animation list and choose one, for example Blur Reveal. Choose a Trigger, for example On Click. Adjust Delay and Duration if you want. Click Update to save your page. The Animation list (click to zoom) SETTINGS Interaction Options Animation Default: Classic Fade UpThe look of the animation. See the full list below. Choose Custom Animations to build your own. Method Default: From ToFrom starts from your values and ends at the normal state. To goes from the normal state to your values. From To lets you set both. Set (custom only) jumps to your values at once. Trigger Default: On ScrollWhat starts the animation. See the trigger list below. Trigger Selector For On Hover and On Click. Type a class like .my-button to start the animation from another element. Leave it empty to use the element itself. Wrapper Default: DefaultFor scroll triggers. Choose Custom to set your own Start Trigger and End Trigger classes. Start / End Default: top 85% / bottom bottomFor scroll triggers. top 85% means: when the top of the element reaches 85% down the screen. Delay Default: 0.15Seconds to wait before the animation starts. Duration Default: 1.5How many seconds the animation takes. Ease Default: Power2.outThe speed curve: Power2.out, Bounce, Back, Elastic, Slowmo, Stepped, Sine, Expo or None. From / To Properties The values the animation moves between, like Opacity, X, Y, Scale or Rotate. Click + Add Property to add more. Markers Default: OffFor scroll triggers. Shows start and end lines on the page, so you can test the positions. From and To properties (click to zoom) Triggers On Scroll Plays when the element scrolls into view. On Page Load Plays as soon as the page loads. Play With Scroll The animation follows your scroll position, forward and backward. On Hover Plays when the visitor moves the mouse over the element. On Click Plays when the visitor clicks the element. On Slide Change Plays when a slider changes slide. Note: You can add many interactions to one element. On Page Load allows one per element. On Scroll and Play With Scroll share one slot. On Hover and On Click are unlimited. LIBRARY Ready Animations Choose any of these from the Animation list: Classic Fade Up Blur Reveal (Apple Style) Skew Up (Awwwards) Clip-Path Unmask Scale In Pop Zoom Out 3D Flip Up Swing Drop Elastic Pop 3D Card Flip (Y) Spin & Scale Slide Right Cinematic Focus (Premium) Mask Reveal Up (Luxury) Perspective Fall (3D) 3D Unfold (SaaS) Magnetic Slide Luxury Drift (Colorize) SaaS Dashboard Build E-com Product Unbox Neon Glow Pulse (Pricing) Gentle Float In (Editorial) RESULT Final Result Six of the animations, one by one. In these examples the trigger is On Click, and the GIFs are slowed down so you can see each step. Classic Fade Up Classic Fade Up Blur Reveal Blur Reveal Clip-Path Unmask Clip-Path Unmask 3D Flip Up 3D Flip Up Elastic Pop Elastic Pop Spin & Scale Spin & Scale ADVANCED Advanced Examples Five real setups you can copy. Each one shows the settings and the result. The GIFs are slowed down. 1. Build Your Own Animation Choose Custom Animations in the Animation list, then write your own From and To values. You can animate more than movement: color, rounded corners, blur and more. Animation: Custom Animations. Method: From To. Trigger: On Click. Duration: 2. From: Opacity 0, Scale 0.4, Rotation -180, Border Radius 50%, Background Color #6366f1. To: Opacity 1, Scale 1, Rotation 0, Border Radius 24px, Background Color #ffffff. From and To properties (click to zoom) The card spins in as a round purple pill, then settles into a white card Tip: Click Property and pick from the list, or type any property name yourself. Use plain numbers, or values with units like 24px and 50%. 2. Start the Animation from Another Element The element you animate and the element the visitor touches can be different. Here, hovering a button makes a card pop. Select the button. In Settings, set ID to hover-btn. Select the card you want to animate. Add an interaction. Set Trigger to On Hover. Set Trigger Selector to #hover-btn. Use # for an ID and . for a class. Trigger Selector points to the button (click to zoom) Hover the button and the card below it pops in 3. Follow the Scroll With Play With Scroll the animation is tied to the scroll bar. Scroll down and it plays forward. Scroll up and it plays backward. Choose an animation, for example Scale In Pop. Set Trigger to Play With Scroll. Set Start to top 85% and End to top 35%. The animation runs while the element moves between these two points on the screen. Play With Scroll settings (click to zoom) Scrolling down grows the card. Scrolling up shrinks it again Tip: Turn on Markers to see the start and end lines on the page while you test. 4. Show Items One After Another Use the Delay to make a row of items appear one by one. Give each item the same animation and a bigger delay. Add the same On Scroll animation to each item, for example Classic Fade Up. Set Delay to 0.1 on the first item. Set Delay to 0.5 on the second item, and 0.9 on the third. Card One, Card Two and Card Three appear one after another 5. Two Animations on One Element One element can have many interactions. Here the same heading reacts to hover and to click. Add the first interaction: Animation: Custom Animations, Method: To, Trigger: On Hover. Set To values Scale 1.12 and Rotation 3. Set Duration 0.4 and Delay 0. Click + Add Interaction. Choose Spin & Scale with Trigger On Click. Two interactions on one element (click to zoom) Hover gives a small tilt. Click gives a full spin Note: A hover animation plays once and then returns to the normal look. Move the mouse out and in again to play it again. GOOD TO KNOW How It Works Build your own Choose Custom Animations in the list, then add your own From and To properties. Per device The interactions list can be different on desktop, tablet and mobile. Switch the device in the editor and change it. 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 Animation section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Regular Animation. Then reload the editor and select a V4 element. 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. It plays once and never again On Scroll plays when the element enters the screen. For an animation you can repeat, use On Click or On Hover. I cannot add another On Page Load interaction An element can have only one On Page Load interaction, and one scroll interaction. Hover and click interactions are unlimited. You Did It Your element now animates the way you chose. If you face any problem, please contact our support team. We are happy to help.
