Animicro vs Animated Blocks on Scroll

Add scroll based animations to WordPress Gutenberg blocks. Features Choose from 76 cross-browser CSS3 animations or add your own Preview animations in the editor Adjust the animation duration, delay, scroll threshold, and offset Apply animation controls directly to regular Gutenberg blocks Show or hide animation controls for regular blocks from Settings > Animated Blocks Replay the selected dropdown animation from the editor inspector Settings Duration: The speed of the animation in milliseconds. Delay: How many milliseconds to wait before animating the element. Threshold: Add animation when x% of the element enters the screen. Start with opacity 0: Set the element to opacity 0 when the page loads. The option works for elements transitioning to 100% opacity through CSS. Offset Top (available in the block’s advanced settings): Number of pixels to offset the animated block from the top of the page. Useful when a page has a fixed top navigation bar. Show animation controls on all blocks: Enable or disable animation controls for regular Gutenberg blocks. When disabled, blocks that already have saved animation settings keep showing the controls until those settings are cleared. Class name “ab-animation-end” is added to the animated block after the CSS animation has ended. This class name can be used to add custom styles. Requirements PHP 5.6+ is recommended, WordPress 5.0+, and Gutenberg must be active. Documentation Select a Gutenberg block and open the block settings sidebar to find the Animations panel. Choose an animation from the dropdown, optionally add a custom animation class, and adjust duration, delay, threshold, opacity, and offset settings. The selected animation classes are added when the block enters the viewport. Animation controls can be disabled globally from Settings > Animated Blocks by turning off “Show animation controls on all blocks”. When that option is disabled, blocks that already have saved animation settings will keep showing the animation panel until those settings are cleared. You can also use the Animated Block container from the Design block group. Animated Block is a parent block that lets you nest as many blocks as you want and apply the same animation settings to the whole container. If you need a custom effect, enter your own CSS class name in the Custom animation field and load the matching CSS in your theme or plugin.

Animicro lets you add high-end animations (Awwwards-style) with minimal performance impact. Enable modules in the panel, apply classes like .am-fade, .am-scale, or .am-slide-up in your Page Builder, and you’re done. Philosophy: Utility-first. No complex interfaces, no timelines. Just classes and data-am-* attributes. Free modules Fade (.am-fade) — Smooth appearance with opacity Scale (.am-scale) — Scales from small to full size Slide Up (.am-slide-up) — Slides up when appearing Slide Down (.am-slide-down) — Slides down when appearing Slide Left (.am-slide-left) — Slides in toward the left (from the right edge) Slide Right (.am-slide-right) — Slides in toward the right (from the left edge) Skew Up (.am-skew-up) — Slides up with a slight skew that straightens as it stops (Stripe / Vercel-style) Float (.am-float) — Infinite soft up/down floating motion (continuous) Pulse (.am-pulse) — Infinite gentle scale pulse — breathing-like (continuous) Highlight (.am-highlight) — Animated marker highlight behind text on entry Typewriter (.am-typewriter) — Types text character by character with a blinking cursor Zoom Hover (.am-hover-zoom) — Image scales up smoothly on hover (parent needs overflow: hidden) Blur (.am-blur) — Blur that clears as the element appears Flip X / Flip Y (.am-flip-x, .am-flip-y) — 3D card flip on entry, AOS-style Ken Burns (.am-ken-burns) — Slow infinite zoom for hero images (continuous) Stagger (.am-stagger) — Animates a container’s children in sequence Parallax (.am-parallax) — Scroll-linked parallax movement Scroll Slide Left / Right (.am-scroll-slide-left, .am-scroll-slide-right) — Horizontal drift across the viewport as you scroll Page Curtain — Symmetric overlay transition between internal pages Each module has its own settings panel with live preview so you can tune duration, easing, delay, and activation margin without leaving the admin. Pro modules (available with Animicro Pro) Twelve premium modules, grouped in three families: Mouse Interactions — Magnet, Magnetic and Custom Cursor: elements that react to the visitor’s pointer. Premium text — Split Text, Scatter Text, Scramble Text and Text Reveal. Premium reveals — Clip Reveal, Grid Reveal, Image Parallax, Text Fill on Scroll and Spin. Plus Smooth Scroll. Learn more at animicro.com. Builder compatibility Works with Elementor, Bricks, Breakdance, Oxygen, Divi, and Gutenberg. Dynamic inline CSS adapts per builder so elements stay visible inside editors and animations only run on the live frontend. Advanced Under Animicro → Advanced you can enable Respect Reduced Motion (skips JS-driven animations when the visitor prefers reduced motion) and Debug Mode (outlines .am-* elements and logs script timing in the browser console). External Services This plugin does not connect to any external services. All animation logic runs locally in the visitor’s browser using JavaScript bundled with the plugin. No data is collected, transmitted, or stored outside your WordPress installation. Source Code This plugin includes compiled JavaScript and CSS built with Vite from React (admin panel) and vanilla JS (frontend animations). The full, uncompressed source code is available at: https://github.com/infojorgeml/animicro