Use ease effects

\In some cases, you may want to control the speed of an animation between keyframes. You can make the element to move fast at first and then slowly, or to move very slowly in the beginning and then extremely fast until the next keyframe.

We call these settings the Ease effects and there are almost endless variations.

To see the Ease effects panel, add an animator to the timeline and click on the first keyframe. Next, click on the Ease effects icon that you will find here:

easing functions
Access the Ease effects presets

There are 31 Ease effects presets, including Linear which means constant speed between keyframes, and the Step End / Step Start options.

If you prefer a custom ease effect, select Ease and drag the beziers here:

easing functions
Drag the handles freely to create custom ease effects

The ease effect starts from the keyframe for which you set the easing and lasts until the next keyframe. You can set a different ease effect for each keyframe.


Creating discreet animations with Step End and Step Start


In short, discreet animation means that the animation will stay in its initial position and it will jump to the end position with no transition in-between. By default, the number of steps is 1, making the animation go to its end position in one step, but you can increase the number of steps up to 1000:

easing functions

The segment will be marked with a dashed line. As mentioned above, the ease effect starts from the keyframe for which you set the easing and lasts until the next keyframe. You can watch our tutorial on how to use Step easing effects here.


More articles:

How to Animate an Element? | SVGator Help
Learn how to animate an element in SVGator. Get familiar with the most important tools of the tool.
How to Change Keyframe Values? | SVGator Help
Learn how to change keyframe values in SVGator. 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.
Use the Step Animation Timing Function | SVGator Tutorial
Applying timing functions in a transition will change the animation’s speed. In this tutorial you can learn how the step-end easing works. Get started now!

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