Serend Animations

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

1. Open any block in the Gutenberg editor
2. Look for « Serend Animation » in the block inspector panel
3. Choose an animation type (Fade, Zoom, Rotate, Bounce, or Flip)
4. Select a direction using the visual arrow buttons
5. Optionally enable « Slow Motion » for a more dramatic effect
6. Optionally set a delay for staggered effects
7. Click « Show Animation » to preview in the editor
8. 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.