Serend Animations

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

1. Open any block in the Gutenberg editor
2. Look for “Serend Animation” in the block inspector panel
3. Choose an animation from the dropdown
4. Optionally set a delay for staggered effects
5. 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.