V4 Extentions Image-Animation Estimated reading: 6 minutes 4 views Make your images appear with style. Reveal them, scale them or stretch them when the page loads, when visitors scroll, click or hover. More than 30 ready animations are inside. No code needed. WORKS ON Image, SVG, Post Image ANIMATIONS 30+ ready effects PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. 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 Image Animation. Click Save Settings. Image Animation Extension 1 (click to zoom) STEP 2 Add an Interaction An interaction is one animation for your image. You can add more than one. Open your page with the Elementor Editor. Select an Image or SVG widget. In the General tab, open the Image Animation section. Click the + button next to Interactions, or click Add Interaction. Image Animation Extension 2 (click to zoom) A new interaction row is added. By default it is On Scroll → Reveal. Click the row to open its settings. Image Animation Extension 3 (click to zoom) Use the ▶ button on the row to preview the animation in the editor. Use ✕ to remove it. Note: This section shows on Image and SVG widgets, and on the Animation Addons Post Image widget. STEP 3 Choose an Animation Open the Animation list and pick an effect. The three basic ones are Reveal, Scale and Stretch. Image Animation Extension 4 (click to zoom) Then choose a Trigger, which decides when the animation plays. RESULT Final Result Eight 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. The last five are cinematic effects from the Animation list. Reveal: the image is revealed from one side Scale: the image grows from a smaller size (0.5 to 1) Stretch: the image starts narrow with round corners, then stretches wide Cinematic Mask: the image rises with a soft shade and light sweep Scale Animation: the image fades in, blurry, and pops to full size Slice Shutter: the image arrives in vertical slices Mosaic Depth: small tiles fly in and join into the image Liquid Clip: the image is revealed with a soft wavy edge SETTINGS Interaction Settings Each interaction row has its own settings. Some settings show only for certain animations or triggers. Animation The effect. Choose Reveal, Scale, Stretch, Custom Animation, or one of the ready effects below. Trigger Default: On ScrollWhen the animation plays. On Page Load: plays when the page opens. On Scroll: plays when the image scrolls into view. Play With Scroll: the animation follows your scroll. On Click: plays when the image is clicked. On Hover: plays when the mouse is over the image. On Slide Change: plays when a slider changes slide. Note: You can have one On Page Load or scroll interaction on an image. On Click and On Hover can be used many times. Trigger Selector Shows for On Click and On Hover. Type a CSS class, like .my-class, to use a different element as the trigger. Wrapper, Start and End Show for scroll triggers. Start is when the animation begins, and End is when it ends. Default: top 85% and bottom bottom Choose Custom in Wrapper to use other elements as the start and end. Animation To Default: RightFor Reveal. Choose the side: Left, Right, Top or Bottom. Start Scale and End Scale Default: 0.5 and 1For Scale. The size the image starts from, and the size it ends at. Start Width and Start Radius Default: 60% and 40pxFor Stretch. How narrow the image starts, and how round its corners are at the start. Delay and Duration Default: 0 and 1.5Delay waits before the animation starts. Duration is how long it takes. Both are in seconds. Ease Default: Power2.outThe feel of the movement, like Bounce, Back, Elastic or Expo. Markers Default: OffFor scroll triggers. Shows guide lines on the page where the animation starts and ends. Turn it off before you publish. MORE EFFECTS Ready-Made Effects The Animation list has more effects. The ones that start with pro – are cinematic effects. Each one has its own extra settings. Cinematic Mask, Scale Animation, Slice Shutter, Mosaic Depth Liquid Clip, 3D Orbit Tilt, Zoom Tunnel, Scroll Parallax There are also ready effects like Classic Fade Up, Blur Reveal, Skew Up, Clip-Path Unmask, Scale In Pop, Zoom Out, 3D Flip Up, Swing Drop, Elastic Pop, Spin & Scale, Slide Right, Cinematic Focus, Mask Reveal Up, Perspective Fall, 3D Unfold, Magnetic Slide, Luxury Drift, SaaS Dashboard Build, E-com Product Unbox, Neon Glow Pulse and Gentle Float In. Tip: Start with a basic effect. Pick a ready effect when you want something more dramatic. PER DEVICE Different Interactions Per Screen Size Interactions can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Use a big effect on desktop. Use a simple one, or none, on mobile. TRY THIS Quick Recipes Reveal on scroll Animation: Reveal Trigger: On Scroll Animation To: Left Duration: 1.5 Stretch on scroll Animation: Stretch Trigger: On Scroll Start Width: 60 Start Radius: 40 NEED HELP? Troubleshooting I do not see the Image Animation section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Image Animation. Then reload the editor. Select an Image or SVG widget and open the General tab. The animation does not play on my page Make sure the page is saved and Animation Addons Pro is active. Check the Trigger. For On Scroll, the image must scroll into view. Turn on Markers to see where it starts. To test it in the editor, use the ▶ button on the row. I cannot add another scroll interaction An image can have one On Page Load or scroll interaction. Use On Click or On Hover if you need more. You Did It Your image now animates. If you face any problem, please contact our support team. We are happy to help.
