Rufus87

xpac

Erik Tadevosyan

<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="640" height="340" src="https://www.youtube.com/embed/VuE9Esm8ABA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>Designed for the next generation WordPress websites, the plugin allows you to add light-weight Lottie animations anywhere in the Gutenberg editor, including the Site Editor and Widget editor. Also, our plugin covers comprehensive interactivity settings to set a custom behavior for your Lottie Animation, while the high-quality coding and optimisations provide future-proof functionality for you to enjoy and to impress your visitors.</p>
<p><strong>Features</strong></p>
<ul>
<li>Chain mode on autoplay state. You can control the speed and delay of the animation.</li>
<li>Chain mode on loop state. You can control the count, speed and delay of the animation.</li>
<li>Chain mode with click state. Plays animation on click with above mentioned control available.</li>
<li>Chain mode with hover state. Plays animation when hovering mouse on it, above mentioned contols availible.</li>
<li>Chain mode with none state. Does not play the animation.</li>
<li>Scroll mode on seek state.  Plays the animation back and forth depending on the scroll. Allows basic controls plus visibility start and visibility end options for complete customization. The loop toggle plays animation after the ‘visibility end’ percentage is reached.</li>
<li>Scroll mode on loop state plays an animation on loop after the percentage set from ‘visibility start’ is reached.</li>
<li>Scroll mode on play state. Plays the animation once after the percentage set from ‘visibility start’ is reached.</li>
<li>Link: you can add internal or external links to animations.</li>
</ul>
<p><strong>HOW TO USE</strong></p>
<ul>
<li>Install and activate the plugin</li>
<li>Inside the WordPress BLock Editor or Site Editor, find the “Lottie Animation” block and add it.</li>
<li>Add a URL or upload the JSON file of your preferred animation.</li>
<li>Check the animation settings on the right sidebar, where you can control the options, such as interactivity mode & state, animation speed,  delay, add a link and much more.</li>
<li>Put the block inside a group or column to have controll over its dimensions, positioning, backgroung color, etc.</li>
</ul>
<h3>Limitations</h3>
<p>With some FSE themes, the animation may not be rendered within the Site Editor (not to be confused with the Gutenberg block editor) when set inside a template or template part, but it works properly on the front end regardless. This is due to the fact that the Site Editor is still in Beta state and event listeners are not properly applied. Following WordPress updates are expected to fix this.</p>


XPAC Lottie Interactive Animations

A powerful tool to add impressive light-weight animations to your website with a Wordpress native site editor, optimized for performance and Full Site …

lordicon

<p>Lordicon offers a unique library of modern, animated icons designed to bring life and interactivity to your WordPress site. With this plugin, you can seamlessly browse, customize, and insert Lordicon icons directly into the Gutenberg editor.</p>
<p>Built to be fast, lightweight, and easy to use, the Lordicon plugin helps you enrich your content with motion graphics that stay performance-friendly. Whether you need subtle interactions or eye-catching animations, Lordicon provides the flexibility to match your brand and design style.</p>
<h3>Features</h3>
<ul>
<li>Extensive free icon set (with attribution)</li>
<li>Full icon library available in PRO version (no attribution)</li>
<li>Insert icons directly into Gutenberg blocks  </li>
<li>Customize color, stroke, animation type, and trigger  </li>
<li>Optimized rendering with image fallbacks and lazy-loading for performance</li>
</ul>
<h3>Why Choose Lordicon?</h3>
<p><strong>Fully Customizable</strong></p>
<p>Modify icons directly within WordPress: choose colors, animation triggers (hover, click, loop), and more.</p>
<p><strong>Peak Performance</strong></p>
<p>Icons are rendered using image fallbacks on initial load and transition to animated formats only when users interact with them—keeping your pages fast and smooth.</p>
<p><strong>License-Friendly</strong></p>
<p>Stay compliant with free personal or commercial use through clearly defined licensing plans.</p>
<h3>License</h3>
<p>The plugin code is licensed under GPLv2 or later.<br />
However, the Lordicon icons themselves are licensed separately under the <a href="https://lordicon.com/licenses" rel="nofollow ugc">Lordicon License Terms and Conditions</a>.</p>
<h3>Development</h3>
<p>Source code is available on GitHub:<br />
https://github.com/lordicondev/plugin-wordpress</p>
<p>This plugin includes a frontend build step for its Gutenberg block UI.</p>
<ul>
<li>Source files: <code>/ui</code> directory (JavaScript/TypeScript, styles, etc.)  </li>
<li>Build tool: <a href="https://vitejs.dev/" rel="nofollow ugc">Vite</a>  </li>
<li>Build output: <code>/dist</code> directory (included in the distributed plugin)  </li>
<li>PHP files: top-level plugin files – no build process required  </li>
</ul>
<h3>Build instructions</h3>
<p>Clone the repository and run:</p>
<pre><code>cd ui
npm install
npm run build
</code></pre>
<p>This will generate the production-ready frontend assets in <code>/dist</code>.</p>


Lordicon

Enhance Gutenberg pages with animated icons from Lordicon. Add motion and style with high performance.

XPAC Lottie Interactive Animations vs Lordicon