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.

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.