Prototype animations

Before you start

Who can use this feature

Users on any team or plan.

Users with can edit access can create prototypes.

New to Prototyping? Check out our Getting Started with Prototyping guide.

Animations can be used to create smooth transitions between pages and define the behavior for actions like expanding a menu, swiping between pages, or opening a gallery.

Instant

The Instant transition will immediately display the Destination Frame, when the hotspot is interacted with (clicked, hovered over, or pressed).

Dissolve

The Dissolve transition will fade in the Destination frame, on top of the original frame.

Supports:

• Duration
• Easing

Smart Animate

Smart Animate looks for matching layers that exist across multiple frames. For layers that match, we recognize what's changed and apply transitions to seamlessly move between them.

Supports:

• Duration
• Easing

Move In / Move Out

The Move transition will slide the Destination frame into or out of view, above the original frame.

Supports:

• Easing
• Direction
• Duration

Push

The Push transition will push out the original frame, as the Destination frame is moved into view. This is the perfect transition for replicating a swiping gesture.

Supports:

• Direction
• Easing
• Duration

Slide In / Slide Out

The Slide will move the Destination frame into or out of view. Slide will slowly offset the frame as it dissolves, while the Move transition keeps the original frame stationary.

Supports:

• Direction
• Easing
• Duration