Adjust an animation's easing

In nature, nothing moves at a perfectly uniform speed. Friction, gravity, and air resistance mean objects gain momentum as they start moving and lose it as they come to a stop.

You can use easing to replicate that physical logic by controlling whether an animation accelerates, decelerates, or both.

There are two types of easing:

• Bézier curves
• Spring animations

Types of Bézier curves

Linear

Creates an animation that is uniform in speed throughout.

Best used for: Objects where a consistent, mechanical rhythm is expected, such as spinners or progress indicators.

Ease in

Creates an animation that starts slowly and accelerates as it reaches the end of its duration.

Best used for: Objects that are leaving the screen or being dismissed. The slow start gives users a moment to register the movement, and the fast exit feels decisive.

Ease out

Creates an animation that starts fast and decelerates as it reaches the end of its duration.

Best used for: Objects that are entering the screen or appearing. The fast start gets the element into position quickly, and the slow deceleration helps it feel like it’s settling into place.

Ease in and out

Creates an animation that starts slowly, accelerates in the middle, and slows as it reaches the end of its duration.

Best used for: Objects moving from one position to another within the screen. Since the object stays visible the whole time, both the departure and arrival need to feel smooth

Ease in back

Creates an animation that winds up in the opposite direction before accelerating toward its end position. This creates a bounce in the animation that builds anticipation and prepares the viewer for the main action.

Best used for: Objects exiting the screen in contexts where a little expressiveness is appropriate. The anticipation gives the exit a sense of intention and playfulness.

Ease out back

Creates an animation that starts fast and overshoots the target position slightly before settling back into place. This adds a bounce to the animation that creates a smooth ending transition for the main action.

Best used for: Objects entering the screen in expressive or playful contexts. The overshoot gives the landing a sense of energy and confidence.

Ease in and out back

Creates an animation that winds up slowly, then accelerates quickly before slowing down and overshooting its end position. This creates an anticipatory bounce at the start, a quick motion, with a rebounding motion before the final state.

Best used for: Objects moving from one position to another within the screen in expressive or playful contexts.

Hold

Unlike the other easing curves, holds don’t create a gradual transition as the object moves from one point to another. When a hold is applied between two keyframes, the object immediately jumps to its final position and stays there for the full duration before the next keyframe begins.

Holds are useful for multi-step sequences where an object needs to pause at an intermediate state before continuing, such as a loading screen that snaps into place, and holds before the content fades in. Holds can also be used to create rhythmic animations where the timing needs to feel deliberate and precise.

Types of spring animations

Spring animations are used to create dynamic and bouncy animation that mimics the behavior of a physical spring being stretched and released.

You can choose from the following preset springs or create your own:

• Gentle: Creates a slow, soft spring with minimal overshoot
• Quick: Creates a fast, responsive spring with a short settle time
• Bouncy: Creates a high-energy spring with noticeable overshoot and oscillation before settling
• Slow: Creates a steady spring with a longer settle time and minimal overshoot

Create custom easing curves and springs

Preset easing curves and springs are designed to work across a wide range of scenarios, but that universality can also limit the amount of personality you can add to your animation.

Custom curves let you go beyond standard motion and create distinctive movement that matches your brand’s personality. For example, a steep, snappy deceleration feels energetic and confident. A long, gradual deceleration feels calm and measured. When custom curves are used consistently, that rhythm becomes part of your brand’s motion language.

Create a custom easing curve

You can use the curve editor to adjust the curve of an existing preset, or to create a custom curve.

A Bézier curve is defined by four values, representing two control points. Each control point has an x and y coordinate. The x axis represents the progression of time. The y axis represents the progression of the animation. A straight diagonal line from corner to corner is linear motion. Curves that bow toward the top left produce ease out behavior. Curves that bow toward the bottom right produce ease in behavior.

When a control point’s y axis goes outside the 0 to 1 range, the animation travels beyond its starting or ending value, creating the wind-up and overshoot behavior present in the back curve presets.

To create a custom easing curve:

1. From the Easing menu, select Custom bezier.
2. Click and drag the handles of the curve editor, or enter a cubic-bezier value directly into the field.
3. The curve editor includes points in the lower-left and upper-right corners that indicate the start and end state of the animation. You can reset the curve editor by clicking one of these points.

Create a custom spring animation

Custom springs give you precise control over the bounciness of your motion. When creating a custom spring, you can choose between time-based and physics-based springs.

Time-based springs

Time-based springs let you set the animation’s bounciness and duration. Because you set the duration, you know exactly how long the motion will take to play out, which makes time-based springs useful for when precise timing matters, such as syncing an animation to a sound effect. However, time-based springs may sometimes feel mechanical or rigid, since the motion doesn’t account for the laws of physics.

Physics-based springs

Physics-based springs let you simulate real-world motion through the following settings:

• Stiffness: How strongly the spring pulls the object toward its target. Higher stiffness means a stronger pull, so the object reaches its destination faster and with more force. Lower stiffness creates a looser, slower pull.
• Damping: How quickly the bounce settles. Low damping lets the object overshoot the target and bounce back and forth several times before coming to rest. High damping reduces or eliminates that bounce.
• Mass (iOS/web only): The weight of the object. A higher mass makes the object feel heavier and more sluggish to start or stop moving.

Rather than setting a duration manually, the spring’s duration is determined by its stiffness, damping, and mass values. This creates more natural motion, though you lose precise control over the timing. You can adjust these values to change the spring’s duration at any time.

Note: Because physics-based springs don’t follow a fixed duration, it’s possible to create motion that ends before or extends past a keyframe’s position on the timeline. The line between keyframes on the timeline indicates where the motion will end. If you need precise timing, use a time-based spring or easing curve instead.

To create a custom spring:

1. From the Easing menu, select Custom spring.
2. Choose a spring type: Time or Physics.
3. Use the settings to configure the spring.

Adjust an animation’s easing

You can adjust an animation’s easing from the Easing menu. How you access the Easing menu depends on the type of animation you’re modifying.

Adjust easing on a preset animation

1. Click the animation on the timeline or in the Animations section of the right sidebar. This will open the animation settings.
2. Choose an option from the Easing menu.

Adjust easing between keyframes

1. Click the line between two keyframes.
2. Choose an option from the Easing menu.