Add beautiful scroll animations to Gutenberg blocks with a simple dropdown. Lightweight, GDPR-friendly, no third-party dependencies!
Serend Animations makes it incredibly easy to add stunning scroll animations to any Gutenberg block. Choose an animation type, select a direction with intuitive arrow buttons, optionally enable slow motion, and watch your content come to life as visitors scroll through your page.
NEW in v1.0.3: Visual direction picker with arrow buttons! All animation types now support all 4 directions (top, right, bottom, left), plus a universal Slow Motion toggle for dramatic effects.
Why choose Serend Animations?
- Visual Direction Control: Intuitive arrow buttons to select animation direction – no more guessing!
- 20 Animation Variants: 5 animation types × 4 directions = endless creative possibilities
- Slow Motion Toggle: Make any animation 1.5x slower for more dramatic effects
- Ultra Lightweight: Pure CSS animations with minimal JavaScript – only 8KB total
- GDPR Friendly: No tracking, no cookies, no external connections – 100% privacy compliant
- Zero Dependencies: No jQuery, no third-party libraries, no external CDNs
- Lightning Fast: GPU-accelerated CSS animations with Intersection Observer
- Security First: Clean code, no external requests, WordPress security standards
- Accessibility Ready: Respects user motion preferences automatically
- White Label Ready: Clean frontend code without plugin branding or bloat
Features
- 5 Animation Types with 4 Directions Each: 20 beautiful animation variants to choose from
- Visual Direction Picker: Intuitive arrow buttons to select animation direction (top, right, bottom, left)
- Slow Motion Toggle: Make any animation 1.5x slower for more dramatic effects
- Staggered Animations: Use the delay slider to create cascading animation effects
- One-Click Integration: No code required – just select an animation and direction
- Performance Optimized: Uses native Intersection Observer API for smooth performance
- Works with All Blocks: Compatible with every Gutenberg block
- Clean Code: Pure CSS + vanilla JavaScript – no bloat, no dependencies
How It Works
- Open any block in the Gutenberg editor
- Look for “Serend Animation” in the block inspector panel
- Choose an animation type (Fade, Zoom, Rotate, Bounce, or Flip)
- Select a direction using the visual arrow buttons
- Optionally enable “Slow Motion” for a more dramatic effect
- Optionally set a delay for staggered effects
- Click “Show Animation” to preview in the editor
- Save and view your animated content on the frontend
Animation Types
Each animation type supports 4 directions (top, right, bottom, left):
- Fade: Elements gracefully fade in while sliding from the selected direction
- Zoom: Elements scale up from smaller size while moving from the selected direction
- Rotate: Elements rotate while scaling and moving from the selected direction
- Bounce: Elements bounce in with elastic effect from the selected direction
- Flip: Elements flip in with 3D rotation (X-axis for top/bottom, Y-axis for left/right)
Plus, every animation can be made slower with the “Slow Motion” toggle for more dramatic effects!
Perfect For
- GDPR-Compliant Websites: No tracking, no cookies, no privacy concerns
- Performance-Critical Sites: Lightweight and fast-loading
- Agency & Developer Projects: White label ready, clean code with no plugin branding
- Landing Pages: Engaging animations without the bloat
- Portfolio Websites: Showcase your work with beautiful effects
- Business Sites: Stand out without compromising on speed or privacy
- Blog Posts: Dynamic content reveals that respect user preferences
- Client Projects: Safe, reliable animations with zero maintenance overhead
Developer Friendly
- Pure CSS + Vanilla JS: No jQuery or framework dependencies
- WordPress Coding Standards: Clean, secure, and maintainable code
- Zero External Calls: No CDNs, APIs, or third-party services
- White Label Frontend: No plugin branding or comments in generated HTML/CSS
- Lightweight Footprint: Only 8KB total – smaller than most images
- Extensible Architecture: Easy to customize with your own CSS
- Debug Mode: Built-in tools for development and troubleshooting (enable via Settings → Serend Animations)
- GDPR Compliant: No data collection, tracking, or external connections
- Security Focused: Follows WordPress security best practices
Additional Information
Minimum Requirements
- WordPress 6.0 or higher
- PHP 7.4 or higher
- Modern browser with JavaScript enabled
Contributing
This plugin is open source. Contributions are welcome.
Screenshots
Animation selection dropdown in the Gutenberg block inspector
(screenshot-1.png)
Delay slider for creating staggered animation effects
(screenshot-2.png)
Example of fade-in animation applied to a paragraph block in Gutenberg editor
(screenshot-3.png)
How do the direction buttons work?
Instead of selecting from a long dropdown list, you now get 4 intuitive arrow buttons that visually show the direction your animation will come from. Click the up arrow for animations from the top, right arrow for right, etc. It’s much more intuitive and visual!
Can I make animations slower?
Yes! The new “Slow Motion” toggle makes any animation 1.5x slower. This works for all animation types (Fade, Zoom, Rotate, Bounce, Flip) and creates more dramatic, elegant effects.
Does this work with all Gutenberg blocks?
Yes! The animation options are added to virtually every Gutenberg block, including core blocks and third-party blocks.
Will this slow down my website?
Absolutely not! The plugin is ultra-lightweight (only 8KB total) with pure CSS animations and minimal JavaScript. It uses the native Intersection Observer API for optimal performance and GPU-accelerated animations for buttery smooth effects. No jQuery, no external libraries, no bloat.
What happens if a visitor has motion sensitivity?
The plugin automatically respects the browser’s prefers-reduced-motion setting. If a visitor has motion sensitivity enabled, animations will be disabled or significantly reduced.
Can I use multiple animations on the same page?
Absolutely! You can use different animations on different blocks, mix directions, combine slow motion effects, and even create staggered effects using the delay slider. With 20 animation variants, the creative possibilities are endless!
Does this work on mobile devices?
Yes, all animations work smoothly on mobile devices and tablets.
Is this white label friendly for agencies?
Absolutely! The plugin generates clean frontend code without any plugin branding, comments, or promotional links. Your clients will only see your professional animations without knowing which plugin was used.
Is this GDPR compliant?
Yes, 100%! The plugin is fully GDPR compliant as it doesn’t collect any user data, doesn’t use cookies, doesn’t make external connections, and doesn’t track users in any way. It’s pure CSS and JavaScript that runs entirely on your website.
Can I preview animations in the editor?
Yes! Click the “Show Animation” button in the block inspector to see a live preview of your animation in the Gutenberg editor. The preview automatically plays when you change the animation type, direction, or enable slow motion.
Can I customize the animations?
Absolutely! The plugin provides 20 carefully crafted animation variants (5 types × 4 directions) out of the box, plus the slow motion modifier. You can also extend or customize them with your own CSS. The code is clean and well-documented for easy customization.
How do I enable debug mode?
Debug mode can be enabled in your WordPress admin area under Settings → Serend Animations. Once enabled, administrators will see a debug overlay on the frontend showing which animation classes are being used. This is helpful for development and troubleshooting.
ChangeLog
1.0.3
- NEW: Visual direction picker with arrow buttons for all animations
- NEW: Slow Motion toggle – make any animation 1.5x slower
- NEW: All animation types now support all 4 directions (top, right, bottom, left)
- NEW: 20 animation variants total (5 types × 4 directions)
- Simplified UI – cleaner animation type dropdown
- Direction selection moved from dropdown to intuitive button grid
- Delay changes no longer trigger editor preview (frontend-only)
- Fixed scroll-fade-in-top and other directional variants not animating
- Frontend JavaScript now uses future-proof attribute selectors
- Better CSS organization with clear section comments
- Universal animation-slow modifier class
- Enhanced editor preview with all directional keyframes
- Improved class management for slow modifier and directions
1.0.2
- Added live animation preview in Gutenberg editor with “Show Animation” button
- Automatic animation preview when selecting or changing animations
- Automatic preview when changing delay values
- Full support for all third-party blocks (Yoast SEO, Rank Math, WooCommerce, etc.)
- Fixed animation class cleanup – no more orphaned fragments
- Fixed correct animation detection for compound classes
- Elements now remain visible in editor while supporting previews
- Animation dropdown now shows correct selection
- All Fade In variants now work correctly
- Improved className management with better filtering
- Production-ready code (removed debug logs)
- Better iframe handling for modern WordPress editor
1.0.1
- Improved code structure and organization
- Separated OOP and functional code into proper files
- Moved plugin functions to includes/ directory following WordPress standards
- Enhanced JavaScript code formatting and WordPress compliance
- Reduced JavaScript linting errors by 85% (from 500+ to 78 errors)
- WordPress Coding Standards compliance improvements
- Better separation of concerns between classes and functions
- Added proper Doc-Comments for all functions and classes
- Implemented Yoda Conditions for better code safety
1.0.0
- Initial release
- 8 animation types: Fade In (bottom, left, right), Fade In Slow, Zoom In, Rotate In, Bounce In, Flip In
- Delay slider for staggered animations (0-2000ms)
- Intersection Observer for performance
- Accessibility support with prefers-reduced-motion
- Debug mode with settings panel (Settings → Serend Animations)
- Visual debug overlay for administrators
- WordPress 6.6 compatibility
- Full internationalization support
