Anchor point rotations are key in this simple tutorial, showing you how to lovingly animate the Vimeo logo.
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 with the start state at
t0 and the end state at
NOW HIT PLAY!
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.
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.
whiteLayerand set it’s anchor point to the bottom-right (we call this position
xproperty keyvalue to
0.5sset the rotation property to
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.
vIconand set it’s anchor point to the bottom-middle (we call this position
0sand change the rotation value to
NOW HIT PLAY!