serend

<p>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.</p>
<p><strong>NEW in v1.0.3:</strong> 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.</p>
<p>Why choose Serend Animations?</p>
<ul>
<li><strong>Visual Direction Control</strong>: Intuitive arrow buttons to select animation direction – no more guessing!</li>
<li><strong>20 Animation Variants</strong>: 5 animation types × 4 directions = endless creative possibilities</li>
<li><strong>Slow Motion Toggle</strong>: Make any animation 1.5x slower for more dramatic effects</li>
<li>Ultra Lightweight: Pure CSS animations with minimal JavaScript – only 8KB total</li>
<li>GDPR Friendly: No tracking, no cookies, no external connections – 100% privacy compliant  </li>
<li>Zero Dependencies: No jQuery, no third-party libraries, no external CDNs</li>
<li>Lightning Fast: GPU-accelerated CSS animations with Intersection Observer</li>
<li>Security First: Clean code, no external requests, WordPress security standards</li>
<li>Accessibility Ready: Respects user motion preferences automatically</li>
<li>White Label Ready: Clean frontend code without plugin branding or bloat</li>
</ul>
<h4>Features</h4>
<ul>
<li>5 Animation Types with 4 Directions Each: 20 beautiful animation variants to choose from</li>
<li>Visual Direction Picker: Intuitive arrow buttons to select animation direction (top, right, bottom, left)</li>
<li>Slow Motion Toggle: Make any animation 1.5x slower for more dramatic effects</li>
<li>Staggered Animations: Use the delay slider to create cascading animation effects</li>
<li>One-Click Integration: No code required – just select an animation and direction</li>
<li>Performance Optimized: Uses native Intersection Observer API for smooth performance</li>
<li>Works with All Blocks: Compatible with every Gutenberg block</li>
<li>Clean Code: Pure CSS + vanilla JavaScript – no bloat, no dependencies</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Open any block in the Gutenberg editor</li>
<li>Look for “Serend Animation” in the block inspector panel</li>
<li>Choose an animation type (Fade, Zoom, Rotate, Bounce, or Flip)</li>
<li>Select a direction using the visual arrow buttons</li>
<li>Optionally enable “Slow Motion” for a more dramatic effect</li>
<li>Optionally set a delay for staggered effects</li>
<li>Click “Show Animation” to preview in the editor</li>
<li>Save and view your animated content on the frontend</li>
</ol>
<h4>Animation Types</h4>
<p>Each animation type supports 4 directions (top, right, bottom, left):</p>
<ul>
<li><strong>Fade</strong>: Elements gracefully fade in while sliding from the selected direction</li>
<li><strong>Zoom</strong>: Elements scale up from smaller size while moving from the selected direction</li>
<li><strong>Rotate</strong>: Elements rotate while scaling and moving from the selected direction</li>
<li><strong>Bounce</strong>: Elements bounce in with elastic effect from the selected direction</li>
<li><strong>Flip</strong>: Elements flip in with 3D rotation (X-axis for top/bottom, Y-axis for left/right)</li>
</ul>
<p>Plus, every animation can be made slower with the “Slow Motion” toggle for more dramatic effects!</p>
<h4>Perfect For</h4>
<ul>
<li>GDPR-Compliant Websites: No tracking, no cookies, no privacy concerns</li>
<li>Performance-Critical Sites: Lightweight and fast-loading</li>
<li>Agency & Developer Projects: White label ready, clean code with no plugin branding</li>
<li>Landing Pages: Engaging animations without the bloat</li>
<li>Portfolio Websites: Showcase your work with beautiful effects</li>
<li>Business Sites: Stand out without compromising on speed or privacy</li>
<li>Blog Posts: Dynamic content reveals that respect user preferences</li>
<li>Client Projects: Safe, reliable animations with zero maintenance overhead</li>
</ul>
<h4>Developer Friendly</h4>
<ul>
<li>Pure CSS + Vanilla JS: No jQuery or framework dependencies</li>
<li>WordPress Coding Standards: Clean, secure, and maintainable code</li>
<li>Zero External Calls: No CDNs, APIs, or third-party services</li>
<li>White Label Frontend: No plugin branding or comments in generated HTML/CSS</li>
<li>Lightweight Footprint: Only 8KB total – smaller than most images</li>
<li>Extensible Architecture: Easy to customize with your own CSS</li>
<li>Debug Mode: Built-in tools for development and troubleshooting (enable via Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Serend Animations)</li>
<li>GDPR Compliant: No data collection, tracking, or external connections</li>
<li>Security Focused: Follows WordPress security best practices</li>
</ul>
<h3>Additional Information</h3>
<h4>Minimum Requirements</h4>
<ul>
<li>WordPress 6.0 or higher</li>
<li>PHP 7.4 or higher</li>
<li>Modern browser with JavaScript enabled</li>
</ul>
<h4>Contributing</h4>
<p>This plugin is open source. Contributions are welcome.</p>


Serend Animations

Add beautiful scroll animations to Gutenberg blocks with a simple dropdown. Lightweight, GDPR-friendly, no third-party dependencies!

asalamwp

numixtech

Gaurav Padia

<p>Page Transition is a simple and easy wordpress plugin used to add page transition using CSS3 animations. Show your page with modern animations.</p>
<p>Set different animations effects for page in (on load) and page out (on unload). You can also set value to “None” to disable page in or page out animation.</p>
<p>Available options and features:</p>
<ul>
<li>Set Page In Animation</li>
<li>Set Page Out Animation</li>
<li>Set Page In Animation Duration</li>
<li>Set Page Out Animation Duration</li>
<li>Set whether to show loading or not</li>
<li>Set loading text color</li>
</ul>
<h4>9 different transition effects available</h4>
<ul>
<li>Fade</li>
<li>Fade Down</li>
<li>Fade Up</li>
<li>Fade Left</li>
<li>Fade Right</li>
<li>Rotate</li>
<li>Flip X</li>
<li>Flip Y</li>
<li>Zoom</li>
</ul>
<p>This plugin is using jquery animsition plugin by Bilvesta. Please check demo at <a href="http://git.blivesta.com/animsition/" rel="nofollow ugc">http://git.blivesta.com/animsition/</a></p>


Page Transition

hi and good work on this one!

i just wanted to mention i had to change the jquery.animsition.js files for the newer version to fix the back-button-blank-page bug. I think it could already come with the plugin download...
Oh, and also the transition works on everything in the page except the parallax image header... (adamrom-parallax-scroll)

cheers :)

great but...

Page Transition is a simple and easy wordpress plugin used to add page transition using CSS3 animations. Show your page with modern animations.

Serend Animations vs Page Transition