About this plugin
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.
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
– Add a link to the image if needed
Usage
Using the Gutenberg Block
- Add a new block and search for SVG AutoMotion.
- Select your SVG image from the Media Library.
- Choose which animations to apply and set the animation duration.
- Add a link to the image if needed under link settings
- 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”]
You can combine multiple effects:
svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″]
You can also add a link to the shortcode
org” link_newtab=”true” ]
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
– link_url — url to link to (optional)
– link_newtab — set to true if you wish the link to open in a new tab