6. Apply animation type

Animations control the transition effect between frames and deﬁne the behavior of actions like “navigate to.”

Animation Types

Figma provides the below animation type presets.

Instant: Immediately displays the destination frame when trigger is ﬁred.
Dissolve: Fades in destination frame, on top of the original frame.
Push: Pushes out original frame as destination frame is moved into view.
Move in/out: Slides destination frame into or out of view, above original frame.
Slide in/out: Slowly offsets frame as dissolves, while move transition keeps original frame stationary.
Smart animate: Looks for matching layers that exist across multiple frames. For layers that match, it recognizes what's changed and applies transitions to seamlessly move between them. We’ll explain how this works in the next section.

🌟 Plugin supports all animation types 🌟

Animations (except Instant) have three effects settings that control behavior.

Duration: Controls how long it takes in milliseconds to complete the transition from the time the trigger is fired. Can be set from 1- 10,000ms.
Direction: Controls the direction of the move in/out, slide in/out, and push animations (left, right, down, or up).
Easing & spring: Controls the acceleration of the transition between a starting frame and its destination.

🌟 Plugin supports all effects settings 🌟

Set both animation type and related effects in the interaction detail box that appears after establishing a connection between Frames or Variants.