Animators and keyframes

You can start adding keyframes after you’ve added at least one element and one animator to the timeline. Keyframe values are different for each animator:

a) Position animator

It has two inputs, one for the X-axis and one for the Y-axis. On the X-axis, you can move the element horizontally from left to right by increasing the value, and from right to left by decreasing it to a negative value. 0 is always the initial position of the element.

On the Y-axis you can move the element vertically: up, by decreasing the value, even to negative numbers, and down by increasing it. 0 is always the initial position of the element.

b) Rotate animator

It comes with two inputs. The first one represents a complete rotation (a total of 360 degrees). For example, if you type in ‘3’ in the first input, it means three complete rotations (3 x 360 degrees). The second input is for degrees only.
You can also use negative values for counterclockwise rotations.

c) Scale animator

It has two inputs, the first one is for the X-axis and the second one is for the Y-axis. The default values are 100%, 100% with the maintain proportion option enabled. You can scale the element proportionally up or down to 0%. If you want to scale only on X-axis or Y-axis, simply click on the link symbol to disable the maintain proportions option. Scaling below 0 isn’t supported.

*Please note that changing the element’s origin point will also change the animation. You can read more about the origin point here.

d) Opacity animator

Supports values between 0% and 100%.

a) Path animator

*Make sure you use Path animator for elements that have stroke paths. This animator won’t take effect for elements that have only fill color.

Download SVG sample  ()

The path animator has two properties: Offset and Dashes.
The Offset property will define the location along a path where your array of dashes will begin.

Animating a self-drawing path

• Use the length of the path (385.35 in this case) for the starting keyframes, as in the image below.

• Set the end keyframe and use 0 for offset, as in the image below:

The animation should look like this:

Another way is to use negative values for Offset keyframes, for example -385.55 for the firsft keyframe and 0 for the second one.

*Negative values for offset will cause animation issues in Safari. We recommend setting up the path animation using only positive values.

Animating a self-erasing path

• Use the triple of the length (1156.05 in this case) for the first Offset keyframe, the double of length (770.7 in this case) for the second keyframe, and the length of 385.35 for the 3rd keyframe.  - The Dashes keyframe will remain the same (385.35)

Download SVG sample

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.