SVG AutoMotion

Àpèjúwe

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:
Ìtumọ̀ Yorùbá: – Gutenberg block and shortcode support
Ìtumọ̀ Yorùbá: – Fade, rotate, scale, and slide effects
Ìtumọ̀ Yorùbá: – Adjustable animation duration
Ìtumọ̀ Yorùbá: – Lightweight, pure JavaScript (no dependencies)
Ìtumọ̀ Yorùbá: – Works with any SVG in your media library
Ìtumọ̀ Yorùbá: – Add a link to the image if needed

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. Add a link to the image if needed under link settings
5. 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Ìtumọ̀ Yorùbá: ″]

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Ìtumọ̀ Yorùbá: ″ link_url=”https://wordpress.org” link_newtab=”true” ]

Parameters:
Ìtumọ̀ Yorùbá: – src — relative or full URL path to your SVG file
Ìtumọ̀ Yorùbá: – fade, rotate, scale, slide — enable/disable each effect
Ìtumọ̀ Yorùbá: – duration — total animation time in milliseconds
Ìtumọ̀ Yorùbá: – link_url — url to link to (optional)
Ìtumọ̀ Yorùbá: – link_newtab — set to true if you wish the link to open in a new tab