Advanced Tracing Animations

Taking tracing a step further, learn how to coordinate the tracing of shapes by aligning their timing and rotations.

First…

Grab the icons.sketch file

Layout in Sketch.

Where we’re going Marty, we don’t need states. For this tutorial, we only need to original layout for Dribbble icon.

You’ll find the logo on the Originals page in icons.sketch.

dribbbleStates
The Dribbble artboard is on the Originals page in Sketch.

Create a Flow File

Create a Flow file by adding the Dribbble artboard at both t0 and t1.

dribbbleFlowFile
Dribbble Flow File

Since we used the same artboard for the start and end states, there is no initial animation in Flow.

Animate!

The goal is to create an animation that makes it look like the vertical line and the outer circle are a single shape.

Do the following steps all with the playhead at 0.0s

Align the Shapes

First, we want to align the ends of the vertical shape with the diameter of the circle.

  1. Select all the shapes
  2. Change their Line Cap property to rounded
  3. Deselect the vertical shape, and scale the circle ever so slightly to accommodate for the now “longer” vertical line.

If Flow makes animations for the Line Cap, you can select the last keyvalue of any new track and hit delete.

Orient the Circle

Next, we want the “beginning” of the circle’s path to align with the “end” of the vertical line.

  1. With the circle selected, change it’s Stroke End to 0.25
  2. Then, rotate the circle so that it’s “beginning” point lines up perfectly with the top side of the vertical shape. The rotation value should be -22.0
shapesAligned
The ends of the shapes should align nicely.

Set the Stroke Ends

The animation of a shape’s path depends on how it was originally drawn (in Sketch, Illustrator, wherever). In this example, the vertical shape was drawn from top to bottom. And, the bottom and top shapes were drawn right-to-left and left-to-right, respectively.

  1. Select circle, top, and bottom, then change their Stroke End to 0.0
  2. Select vertical then change its Stroke End to 1.0
dribbbleTimeline
The final timeline should look like this.

Animate the Strokes

Now we create the lovely effect.

  1. The verticals’s Stroke End animation should run from 0.0s to 0.25s
  2. Change the easing to Ease Out
  3. The circle’s Stroke End animation should run from 0.25s to 0.5s
  4. Change the easing to Ease In
  5. The bottoms’s Stroke End animation should run from 0.5s to 0.75s
  6. The tops’s Stroke End animation should run from 0.75s to 1.0s

Group and Rotate

Let’s add one last bit of flair…

  1. Convert the 4 shapes to a group and call it Logo.
  2. Move the playhead to 0.0s, select the >Logo group, and change it’s rotation to 90 degrees.

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