vikingplugins

SVG AutoMotion makes it effortless to apply clean, performant animations to SVG graphics as they scroll into view — perfect for adding motion to brand logos, icons, and illustrations.
See examples at <a href="https://viking.infy.uk/svg-automotion/" rel="nofollow ugc">viking.infy.uk/svg-automotion</a>
Key features: 
– Gutenberg block and shortcode support 
– Fade, rotate, scale, and slide effects 
– Adjustable animation duration 
– Lightweight, pure JavaScript (no dependencies) 
– Works with any SVG in your media library 
– Add a link to the image if needed
<h3>Usage</h3>
<h3>Using the Gutenberg Block</h3>
<ol>
<li>Add a new block and search for SVG AutoMotion.</li>
<li>Select your SVG image from the Media Library.</li>
<li>Choose which animations to apply and set the animation duration.</li>
<li>Add a link to the image if needed under link settings</li>
<li>Save or preview your post to see the animation in action.</li>
</ol>
See Screenshot 1 and Screenshot 2.
<h3>Using the Shortcode</h3>
You can also insert animations anywhere using the <code>[svg_automotion]</code> shortcode.
Basic example:
[svg_automotion src=”2025/10/automotionlogo.svg”]
You can combine multiple effects:
[svg_automotion src=”2025/10/automotionlogo.svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″]
You can also add a link to the shortcode 
[svg_automotion src=”2025/10/automotionlogo.svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″ link_url=”https://wordpress.org” link_newtab=”true” ]
Parameters: 
– <code>src</code> — relative or full URL path to your SVG file 
– <code>fade</code>, <code>rotate</code>, <code>scale</code>, <code>slide</code> — enable/disable each effect 
– <code>duration</code> — total animation time in milliseconds 
– <code>link_url</code> — url to link to (optional) 
– <code>link_newtab</code> — set to true if you wish the link to open in a new tab

SVG AutoMotion

Animate any SVG image as it comes into view. Bring your logos, icons, and illustrations to life with simple, automatic animations.

Felix Arntz

This plugin adds a subtle snow fall effect to your website, using the lightweight <code><snow-fall></code> JavaScript web component by <a href="https://www.zachleat.com" rel="nofollow ugc">Zach Leatherman</a>.
<ul>
<li><a href="https://www.zachleat.com/web/snow-fall" rel="nofollow ugc">Learn more about the <code><snow-fall></code> component</a></li>
<li><a href="https://zachleat.github.io/snow-fall/demo.html" rel="nofollow ugc">Demo of the <code><snow-fall></code> component</a></li>
</ul>
The plugin takes a no-frills, zero-config approach – you simply activate the plugin, and it just works – thanks to the excellent underlying web component implementation. There should be no notable adverse effects on performance, also given the plugin uses the <a href="https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/" rel="nofollow ugc">WordPress Script Modules API</a> that was introduced in WordPress 6.5.
The plugin respects user preferences for reduced motion, as a best practice for accessibility.
Additional credit: <a href="https://unsplash.com/photos/snow-field-and-green-pine-trees-during-daytime-IWenq-4JHqo" rel="nofollow ugc">Banner image by Adam Chang</a>
<h4>License</h4>
The Snow Fall plugin is <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">licensed under the GPLv2 (or later)</a>.
The <code><snow-fall></code> and <code><is-land></code> web components are <a href="https://opensource.org/license/mit" rel="nofollow ugc">licensed under the MIT license</a>.
See their source code on GitHub:
<ul>
<li><a href="https://github.com/zachleat/snow-fall" rel="nofollow ugc"><code>zachleat/snow-fall</code></a></li>
<li><a href="https://github.com/11ty/is-land" rel="nofollow ugc"><code>11ty/is-land</code></a></li>
</ul>

Snow Fall

Adds a subtle snow fall effect to your website, using a lightweight web component.

SVG AutoMotion vs Snow Fall