The Concept of Tracing Shapes

This tutorial introduces the concept of tracing shapes, while you build a nice animation for the CodePen logo.

First…

Grab the icons.sketch file

Layout in Sketch.

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

codepenStates
CodePen States

Create a Flow File

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

codepenFlowFile
CodePen Flow File

NOW HIT PLAY!

Animate!

You can animate the length of a shapes stroke! Just follow along…

  1. Move the playhead to 0.0s
  2. Select the Icon layer, then in the shape property panel set the shape’s END POINT to 0
  3. Drag the last keyvalue for the Stroke End track to 0.5s
  4. Drag the start and end keyvalues for Fill Color to 0.4s and 0.75s, respectively.
  5. Drag the start keyvalue for Stroke Width to 0.5s
codepenTimeline
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 “”.