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.

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.

Select all the shapes
Change their Line Cap property to rounded
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.

With the circle selected, change it’s Stroke End to 0.25
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.

Select circle, top, and bottom, then change their Stroke End to 0.0
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.

The verticals’s Stroke End animation should run from 0.0s to 0.25s
Change the easing to Ease Out
The circle’s Stroke End animation should run from 0.25s to 0.5s
Change the easing to Ease In
The bottoms’s Stroke End animation should run from 0.5s to 0.75s
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…

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

NOW HIT PLAY!

❤︎