Image Animation

The Image Animation shortcode for WordPress can be used to include static images within posts or pages and animate them in various styles with movement linked to page scrolling. This offers multiple options to webmasters to create visual appealing designs with images set to create an action when it comes in user’s view and activate only browser scroll. Check below for example implementations and shortcode documentation:

Image Animation Examples

car image moving from left to right on scroll down and backwords on scroll up
pizza rotating clockwise, giving the impression it moves with the browser side scrolling

Image Animation Shortcodes

Image Animation Shortcode
[x3m-animation img="image link here" imgsize="64px;43px" container="400px;180px" animation="move" type="left-to-right" align="left" speed=""]
The shortcode can be used to include an image in the post content and have it animated on scroll with different animation options. Above example displays 2 individual images with different movements set. The car image moves from left to right in a set container, while the pizza rotates based on browser scrolling as if the pizza’s sides are linked to the scrolling side.

Image Animation Documentation

Here are the shortcode option settings available for Image Animation:

Shortcode Settings Details
img=”image link here” This is used to set the link to the image to be used. An internal image or external source image can be set.
imgsize=”64px;43px” This is used to set the image size in pixels, with width and height. Please make sure to preserve proptions of the image when changing from the image actual size.
container=”400px;180px” This is used to set the container size in pixels, with width and height. The container is an invisible space reserved for the image movement and it should be larger than image size.
animation=”move” This is used to set the animation type to the image. Options available:
– “move” – sets the image to move from one side to the other. For this animation we can set type=”left-to-right” from left to right movement, type=”right-to-left” for right to left movement, type=”top-to-bottom” for top to bottom movement or type=”bottom-to-top” for bottom to top movement.
– “rotate” – sets the image to rotate in its container. For this animation we can set type=”clockwise” for clockwise rotation or type=”counter-clockwise” for counter clockwise rotation.
– “flip” – sets the image to flip. For this animation we can set type=”horizontal” for the flip to be horizontal or type=”vertical” for the flip to be vertical.
align=”left”

optional

 This is used to set the container alignment. Content can flow by the animated image container. Options available are: “left”, “center” or “right”.
speed=””

optional

 This is used to set the speed of the animation. No value set leaves the default speed on which calculates the speed based on image size, container size and scroll speed for a natural flow. Should however the user want to speed up or speed down the animation, the speed=”” setting can be used:
– “down-1”, “down-2” to “down-10” decreases the speed with “down-10” bringing animation to full stop
– “up-1”, “up-2” to “up-10” increases the speed