Flow - Now with Lottie & Animated SVGs - Ship beautiful UI Animations. | Product Hunt Embed

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.

twitterStates
Twitter States

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

bigBird
Big Bird

Create a Flow File

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

twitterFlowFile
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
twitterWithEasing
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 “”.