TABLE OF CONTENTS


Easing controls how fast or slow an element moves at different points within an animation frame. For example, you can set your custom animation to start slowly and then accelerate towards the end of the frame.


Watch a video tutorial on Custom Animations.




Easing can be applied to all custom animations. Learn how to add a custom animation to your designs: 


Adding Easing to a Custom Animation


After selecting a custom animation the easing options will appear beneath each selected option. 


You can choose from Preset easing options or create your own Custom easing option. 




Preset Easing Options


You can choose from the following preset options;

  • Ease (default)
    • The animation starts slowly, accelerates sharply, and then slows gradually towards the end.
  • Ease-In
    • The animation starts slowly and then accelerates.
  • Ease-Out
    • The animation starts quickly and then slows down.
  • Ease-In-Out
    • The animation starts slowly, accelerates in the middle, and then slows down again.
  • Linear
    • The animation has a constant speed from start to finish.


Custom Easing Options


You can create a custom easing option by selecting the Custom option from the dropdown or by adjusting any preset option. 


To adjust an easing option, you can:

  • Move the control points on the graph
  • Adjust the input fields x1, y1, x2, y2
    • You can also paste an easing function from an outside source directly into the input field. This allows you to use predefined easing functions or ones you've found elsewhere to achieve the exact animation effect you want.



These controls are based on a Cubic Bezier curve. A Cubic Bezier curve is a mathematical function that defines a smooth curve using four points: the start point, the end point, and two control points (x1, y1) and (x2, y2). 


The x-axis represents time, and the y-axis represents progress. By moving the control points or adjusting the input fields (x1, y1, x2, y2), you can create a variety of easing effects that control how fast or slow your animation moves at different points. A steeper slope in the curve means the animation is happening faster, while a shallower slope indicates a slower movement.


Cubic Bezier curves may look complicated, but the effect that the controls have on your animations can be summarized fairly simply:

  • To make the animations start more slowly, move the first control point (x1 and y1) to the right
  • To make the animation start more quickly, move the first control point (x1 and y1) up
  • To make the animation end more slowly, move the second control point (x2 and y2) to the left
  • To make the animation end more quickly, move the second control point (x2 and y2) down


These adjustments give you full control over the animation’s speed and flow, allowing you to create custom easing effects tailored to your design needs.