SVG AutoMotion

Descripción

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 viking.infy.uk/svg-automotion

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

Usage

Using the Gutenberg Block

1. Add a new block and search for SVG AutoMotion.
2. Select your SVG image from the Media Library.
3. Choose which animations to apply and set the animation duration.
4. Save or preview your post to see the animation in action.

See Screenshot 1 and Screenshot 2.

Using the Shortcode

You can also insert animations anywhere using the [svg_automotion] 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″]

Parameters:
– src — relative or full URL path to your SVG file
– fade, rotate, scale, slide — enable/disable each effect
– duration — total animation time in milliseconds