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

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

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.

Transitions

Timelines

Learn the properties of Timeline to achieve awesome animations!

A Timeline represents the duration, delay and easing of a specific movement of a layer.

Example:

If a layer moves from left to right, Timeline allows us to control how much time this movement will take (duration), if there is a delay, and the easing

Timeline

Timelines Properties

Timeline Properties

Delay

Timeline Delay

Duration

Timeline Duration

Curve

Manages the easing function which determines rate of change of a parameter over time.

In other words: “How to change a value (for example position of layer) over time”.

Sketch Tutorial