Rotation, Scaling and Easing

In this tutorial you’ll learn simple techniques for rotation, scaling and easing to bring the Twitter Logo to life.

First…

Grab the icons.sketch file

Layout in Sketch.

On the Twitter page in icons.sketch, you’ll see two artboards. On the left is the start state – which looks all white – and the right is the final state.

Twitter States

The start state looks all white because it’s actually the bird scaled and rotated.

Big Bird

Create a Flow File

Create a Flow file with the start state at t0 and the end state at t1.

Twitter Flow File

NOW HIT PLAY!

Animate!

To make this animation nicer, we’re going to offset the rotation and position animations. Follow these steps:

  1. Pull the initial Rotation keyvalue to 0.25s
  2. Change the rotation easing to Ease Out
  3. Holding CMD, select the last x and y keyvalues, then pull them to 0.75
  4. Change the x and y easing to Ease In

The final timeline should look like this.

NOW HIT PLAY!

❤︎

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.