Serend Animations makes it incredibly easy to add stunning scroll animations to any Gutenberg block. Simply select a block, choose an animation from the dropdown, and watch your content come to life as visitors scroll through your page.
Why choose Serend Animations?
- 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
- 8 Beautiful Animation Types: Fade In (from bottom, left, right), Fade In Slow, Zoom In, Rotate In, Bounce In, and Flip In
- Staggered Animations: Use the delay slider to create cascading animation effects
- One-Click Integration: No code required – just select an animation from the dropdown
- 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 from the dropdown
- Optionally set a delay for staggered effects
- Save and view your animated content on the frontend
Animation Types
- Fade In (from bottom): Elements gracefully fade in from below
- Fade In (from left): Elements slide in from the left side
- Fade In (from right): Elements slide in from the right side
- Fade In Slow: A slower, more elegant fade from below
- Zoom In: Elements scale up from smaller size
- Rotate In: Elements rotate while fading in
- Bounce In: Elements bounce in with elastic effect
- Flip In: Elements flip in with 3D rotation effect
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.
