10 minutes

Basics, Rotate, Anchor Point

The Value of Anchor Point Rotations

Anchor point rotations are key in this simple tutorial, showing you how to lovingly animate the Vimeo logo.

First…

Grab the icons.sketch file

Layout in Sketch.

On the Vimeo page in icons.sketch, you’ll see two artboards. On the left is the start state and the right is the final state.

It looks like nothing is on the start state, which is true in a way. The shapes for the logo are both off of the artboard, so they look hidden.

Create a Flow File

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

NOW HIT PLAY!

Relative Mode

When you change a value or move a layer, Flow automatically creates keyvalues along the timeline. But, let’s say you just want to change ALL the values of a property throughout the entire animation… You can do this by toggling on Relative Mode.

Animate!

To fancy-up this animation, we’re going to change the anchor points of two layers and edit the timing of their rotations and motion.

The whiteLayer

1. Turn on relative mode
2. Select the whiteLayer and set it’s anchor point to the bottom-right (we call this position {1, 1})
3. Turn off relative mode
4. Move the playhead to 0.25s x-position to -5
5. Drag the last x property keyvalue to 0.75
6. Move the playhead to 0.5s set the rotation property to 45
7. Change the both the easing curves of the x property track to Ease Out

That’s all for this layer.

Are you thinking: "What's with step 4???" Well, it puts just the ever-so-slight pause in the lateral motion of the white layer, giving a nice subtle effect that highlights the rotation animation.

The vIcon

1. Turn on relative mode
2. Select the vIcon and set it’s anchor point to the bottom-middle (we call this position {0.5, 1})
3. Turn off relative mode
4. Move the playhead to 0s and change the rotation value to -45
5. Move the first keyvalue of the rotation track to 0.15
6. Move the last keyvalue of the rotation track to 0.85

NOW HIT PLAY!

❤︎