Valentin Grenier

Simple block animations adds scroll-triggered animations to WordPress Gutenberg blocks without any coding required.
Features:
<ul>
<li>5 animation types (fade, slide up/down/left/right)</li>
<li>Customizable duration and delay</li>
<li>Works with all blocks (core, third-party, and custom blocks)</li>
<li>Lightweight (CSS + Intersection Observer)</li>
<li>No jQuery or heavy libraries</li>
<li>Accessibility-friendly (respects prefers-reduced-motion)</li>
</ul>
Supported Blocks:
Works with all WordPress blocks, including core blocks, third-party blocks, and custom blocks.
Development:
The source code for this plugin is available on GitHub: https://github.com/valentin-grenier/simple-animations-for-gutenberg
The plugin uses npm and webpack to compile JavaScript and CSS files. Source files are located in the <code>src/</code> directory, and compiled files are in the <code>build/</code> directory.
To build from source: 
1. Install dependencies: <code>npm install</code> 
2. Build for production: <code>npm run build</code> 
3. Build for development: <code>npm run dev</code>

Simple Block Animations

Add beautiful scroll-triggered animations to any Gutenberg block with a simple, lightweight solution.

Mehdi Kabab

Easily register and load the effects of the <a href="http://docs.jquery.com/UI/Effects/" title="UI/Effects - jQuery JavaScript Library" rel="nofollow ugc">jQuery UI Effects</a> library in your themes and plugins.
Supported effects:
<ul>
<li><a href="http://docs.jquery.com/UI/Effects/Blind" title="UI/Effects/Blind - jQuery JavaScript Library" rel="nofollow ugc">Blind</a> – Blinds the element away or shows it by blinding it in.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Clip" title="UI/Effects/Clip - jQuery JavaScript Library" rel="nofollow ugc">Clip</a> – Clips the element on or off, vertically or horizontally.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Drop" title="UI/Effects/Drop - jQuery JavaScript Library" rel="nofollow ugc">Drop</a> – Drops the element away or shows it by dropping it in.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Explode" title="UI/Effects/Explode - jQuery JavaScript Library" rel="nofollow ugc">Explode</a> – Explodes the element into multiple pieces.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Fold" title="UI/Effects/Fold - jQuery JavaScript Library" rel="nofollow ugc">Fold</a> – Folds the element like a piece of paper.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Puff" title="UI/Effects/Puff - jQuery JavaScript Library" rel="nofollow ugc">Puff</a> – Scale and fade out animations create the puff effect.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Slide" title="UI/Effects/Slide - jQuery JavaScript Library" rel="nofollow ugc">Slide</a> – Slides the element out of the viewport.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Scale" title="UI/Effects/Scale - jQuery JavaScript Library" rel="nofollow ugc">Scale</a> – Shrink or grow an element by a percentage factor. </li>
<li><a href="http://docs.jquery.com/UI/Effects/Bounce" title="UI/Effects/Bounce - jQuery JavaScript Library" rel="nofollow ugc">Bounce</a> – Bounces the element vertically or horizontally n-times.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Highlight" title="UI/Effects/Highlight - jQuery JavaScript Library" rel="nofollow ugc">Highlight</a> – Highlights the background with a defined color.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Pulsate" title="UI/Effects/Pulsate - jQuery JavaScript Library" rel="nofollow ugc">Pulsate</a> – Pulsates the opacity of the element multiple times.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Shake" title="UI/Effects/Shake - jQuery JavaScript Library" rel="nofollow ugc">Shake</a> – Shakes the element vertically or horizontally n-times.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Size" title="UI/Effects/Size - jQuery JavaScript Library" rel="nofollow ugc">Size</a> – Resize an element to a specified width and height.</li>
<li><a href="http://docs.jquery.com/UI/Effects/Transfer" title="UI/Effects/Transfer - jQuery JavaScript Library" rel="nofollow ugc">Transfer</a> – Transfers the outline of an element to another.</li>
</ul>
<h4>Requirements</h4>
WordPress jQuery UI Effects requires <code>PHP5</code>.

WordPress jQuery UI Effects

Use effects of the jQuery UI Effects library in your themes and plugins!

Simple Block Animations vs WordPress jQuery UI Effects