Align and Distribute Keyvalues

Learn how to align / distribute keyvalues and animations in this Sketch logo animation tutorial.

First…

Grab the icons.sketch file

Layout in Sketch.

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

sketchStates
Sketch States

Create a Flow File

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

sketchFlowFile
Sketch Flow File

NOW HIT PLAY!

Mask to Scene

There’s a nifty option in flow to mask or show elements that are off of the current artboard.

The reason you want to mask is to see the animation only within the bounds of the scene, or to see everything flying around.

Keyvalue / Animation Distribution

You can distribute keyvalues and animations in Flow! Here’s a brief intro:

We'll go over alignment in detail in another tutorial. 

Animate!

The main thing in this animation is to distribute and offset the animations for the shapes.

Distribute the Shapes

With the sketch flow file open…

  1. Press option then tap the arrow to reveal all the timelines
  2. Stretch the timeline view so that you can see all the timelines.
  3. Area select the last keyvalue in every shape timeline.
  4. Move the selected keyvalues to 0.25s
  5. Area select all the keyvalues for shape8 then move them so that the animation ends at 1.0s
  6. Do the same for all the other shapes layers, making sure that they start in a staggered order… DON’T BE PRECISE WITH THE TIMING
  7. With all the keyvalues deselected…
  8. Press SHIFT then tap the last keyvalue in each y track
  9. Hit the distribute-left icon at the top of the properties panel
  10. Repeat steps 8 and 9 for the x tracks
  11. Swap the timing for shape1 and shape3
  12. Swap the timing for shape5 and shape7
  13. Area select all the shape keyvalues and set the entire group’s easing to Ease In

Animate the Diamond

Last but not least, a little bit of style in the bg.

  1. Reveal the diamondFill animation tracks
  2. Move all the start keyvalues to 0.25s
  3. Area select all the keyvalues set the entire group’s easing to Ease Out
sketchTimeline
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 “”.