AnimateGL Animations for WordPress – Elementor & Gutenberg Blocks Animations

Live demo | Documentation | Support Bring your pages to life with scroll animations. AnimateGL animates headings, text, images, buttons, cards and whole sections as they scroll into view. Select a Gutenberg block or an Elementor widget, pick an entrance animation, and publish. No code, and no new page builder to learn. Most animation plugins stop at fade and slide. AnimateGL has those as fast CSS animations, and it adds WebGL animations that bend, flip, peel and stretch an element in 3D. CSS can’t do these effects. They make a hero heading, a product image or a call-to-action button stand out. Why AnimateGL Works where you already build. Animate any block in the Gutenberg block editor, including dynamic blocks and blocks from other plugins. In Elementor, animate any section, column, container or widget. In any other theme or page builder, add a CSS class. Effects you won’t find in other plugins. 8 WebGL animations with 3D distortion, page peel and directional fade, next to 5 GPU-accelerated CSS animations. 65 ready-made presets. Each of the 13 animations plays centered or from the left, right, top or bottom. Every preset has a live preview in the admin. Full control. Set the direction, distance, duration, delay and easing. Play an animation once or every time it enters the viewport, or tie its progress to the scrollbar. Fast. The script is about 37 KB gzipped. The WebGL renderer loads only on pages that use a WebGL animation. Free, no sign-up. All 13 animations and 65 presets are in the free plugin. How it works Install and activate AnimateGL. Select a block in the block editor, or an element in Elementor, and choose an entrance animation. Adjust the direction, duration and delay, and publish. The animation plays on your live site when a visitor scrolls the element into view. Animations included CSS entrance animations (GPU accelerated): Fade, Zoom In, Zoom Out, Wipe, Slide. WebGL entrance animations: Fade (directional), Slide, Stretch, Bend, Flip, Peel, Zoom In, Zoom Out. Ideas for using them: Fade in a hero heading, then slide in its button with a short delay Stagger a row of cards or blog posts by giving each one a longer delay Reveal images in a portfolio or gallery with a wipe or zoom Peel or flip in a call-to-action banner Bend or stretch a product image as it scrolls into view Scroll animations (animate on scroll) Entrance animations are scroll triggered. Each one plays when its element enters the viewport, by default once 70% of the element (or 200px of it) is visible. Turn on Repeat to play the animation every time the element scrolls back into view. Turn on Lock to scrollbar to make the animation follow the scroll position instead of a fixed duration: as you scroll down, the element animates in until it reaches the middle of the viewport. CSS animations CSS entrance animations are GPU accelerated and animate opacity, transform and clip-path. Combine fade, zoom, slide or wipe with direction, distance, easing and delay to create elegant reveal animation effects for headings, text, buttons, images and whole sections. They work on any element, however complex. WebGL animations WebGL animations go beyond CSS. AnimateGL renders the element to an image with html2canvas, then animates it with custom GLSL shaders for 3D distortions, page peel and gradient (directional) fade effects. Use these motion effects, image effects and visual effects on simple elements like headings, buttons and images. Gutenberg block animations Add animations for blocks in the Gutenberg block editor, including dynamic blocks like Latest Posts. Select the block, open the AnimateGL panel in the block settings sidebar, and choose the animation type, direction, distance, duration, delay and easing. Your blocks stay visible while you edit. Elementor animations Add an entrance animation to any Elementor section, column, container or widget. Open the element’s Advanced tab and choose the animation type, direction, distance, duration, delay and easing in the AnimateGL section. CSS class animations for any page builder Not using Gutenberg or Elementor? Add an animation’s CSS class to any element in Visual Composer, another page builder or your theme, for example agl agl-fadeCSSUp or agl agl-bendLeft. The AnimateGL > Entrance Presets admin page lists every preset animation with a live preview and a CSS class you can copy. Animation Editor Design your own entrance animation in the visual Animation Editor on the AnimateGL admin page, then apply it to any element with the agl class. You can set: Fade, with directional fade and threshold Translate along the x, y and z axes Rotation around the x, y and z axes Corners distortion Duration, delay and easing You can set the same properties with CSS classes. Mouse and hover effects The Animation Editor also has mouse-driven distortion effects for interactive hover animations, such as Pull, with options for strength, size, RGB shift and ease. More animations Get more entrance animations with add-ons: Entrance Pack: Circle, Square and Line CSS animations Fade Pack: more fade animations Help us improve If you run into a problem or want a new feature, please open a support topic. If AnimateGL helps your site, a review helps other people find it.