Skip to main content
Animation controls how a property changes over time. Keyframes mark important values at specific moments.

​
Find an animation

Select an element, then open its animation or motion controls. Existing keyframes also appear as diamonds on the timeline. Move the playhead to a keyframe to inspect the element at that moment.

​
Add or change a keyframe

  1. Select the animated element.
  2. Move the playhead to the desired time.
  3. Add a keyframe or change an animated property.
  4. Play through the movement.
You can move, retime, or delete keyframes when the change should happen earlier, later, or not at all.

​
Adjust easing

Easing controls how motion accelerates and slows down between values. Start with a preset that describes the intended feeling. Use the speed curve when a preset is close but the movement still starts, stops, or overshoots incorrectly. Judge easing in motion. A curve cannot tell you whether the viewer has enough time to understand the scene.

​
Auto-keyframe a manual edit

Turn on the auto-keyframe control in the timeline toolbar, move the playhead, and adjust the element on the canvas or in the inspector. Studio records the change as animation instead of applying one constant layout value. Turn auto-keyframing off when you return to normal design edits.

​
Record a gesture

Gesture recording is useful for movement that is easier to perform than describe. Record the path, then refine its timing and shape. Use motion-path controls to adjust nodes, smoothing, arcs, and orientation when the recorded movement needs cleanup.

​
Keep motion useful

  • Animate a reason: reveal, direct attention, show change, or connect two states.
  • Give important text enough time to be read.
  • Avoid several unrelated movements competing in the same moment.
  • Play the transition into and out of the scene, not only the animation in isolation.
For lower-level GSAP details, use the developer animation guide.