Interaction & Animation

Overview

Interactions and Animations empower designers to create beautiful, interactive components right inside Sketch.

Interactive Hover Animation

Create Interactions & Animations

  1. In the Prototyping tab, select Interaction or Animation
  2. Click Create

Interaction and Animation Interface

Layers

Layers

Position

Change Position

Resize

Resize Layers

Rotation

Rotate Layers

Opacity

Change Opacity

States

The Initial State

Initial State

States

States Left Sidebar

States Sidebar

Actions

Actions Supported

As of now, supported Events are:

When the user performs the chosen Event, a Transition is triggered onto the Target State.

For example, let’s say there are 2 states: initial and state1.

If we add an Action to the Button Layer in the initial state with the event ‘On Mouse Enter‘ and connect it to state1, then when the user hovers the mouse on the button, the component will perform a Transition to state1.

Adding Actions

Transitions

Transition

Sketch Tutorial

Sketch Tutorial File