Creating my logo animation

19 minute read

Last week I posted my new logo animation on twitter.

Amongst everyone saying a ton of lovely things, (thankyou) there was a resounding cry of "tutorial". So I'm going to try and break it down for you. Hope this helps someone, I had a ton of fun making it!

There's a few things going on in this logo animation. We've got -

I won't dive too much into GreenSock for this article. But as Sara Soueidan has said

GreenSock is the best thing that happened to SVG animations since SVG animations.

GreenSock provides better cross browser support for SVG animation than we get with CSS. It also, crucially, gives you the ability to chain animations and group animations on timelines. This is invaluable for longer and more complex animation.

They also have a bunch of fun plugins, some of which have been made specifically for SVG, like Draw SVG and Morph SVG.

I've been side-eying their custom bounce plugin for a while, so when I saw an chance to use it to give the little dot some character I jumped (bounced? 😬) at the chance.

Although I love GreenSock, you don't need to learn a whole Javascript animation library to do SVG path animations.

We can do them with CSS too. So I'll run through a couple of different ways to create the same effect.

Let's get going. First up...

SVG stroke-dasharray

stroke-dasharray is a SVG presentation attribute (which we can use as a CSS property) to make our SVG paths dashed instead of solid. The higher the number is, the the bigger the gap between dashes.

<path stroke-dasharray="10" ... />
.dashedPath {
  stroke-dasharray: 10;
}

You can play around with what these values look like in this pen.

See the Pen SVG stroke dasharray demo by Cassie Evans (@cassie-codes) on CodePen.

As well as making the dashes different lengths with stroke-dasharray, we can also offset the stroke position with stroke-dashoffset. If we change this property it looks like our dashes are moving along the path.

Like so...

See the Pen SVG stroke dashoffset demo by Cassie Evans (@cassie-codes) on CodePen.

If we make the gap between the dashes big enough and then change the offset we can create a path "drawing" effect.

See the Pen SVG stroke dashoffset demo - animating by Cassie Evans (@cassie-codes) on CodePen.

Up until now we've been changing the value using a range input, but dashoffset and dasharray are animatable properties, so we can animate them with CSS like so -

See the Pen SVG stroke dashoffset demo - animated with CSS by Cassie Evans (@cassie-codes) on CodePen.

We can also use GreenSock's draw svg plugin to animate the stroke.

See the Pen SVG stroke dashoffset demo - animated with GSAP by Cassie Evans (@cassie-codes) on CodePen.

Under the hood, this is how my logo animation works, but rather than having one continuous line I've broken the path up into nine separate sections. This gives me more control over the timing and helps to avoid any clipping overlaps, which we'll get to in a minute.

See the Pen Cassie! - without clip paths - break down by Cassie Evans (@cassie-codes) on CodePen.

Chaining animations in CSS is a bit of a nightmare as we have to do it with animation-delay. With GreenSock, you can line these animations (or tweens) up on a timeline and easily tweak the timings of each tween in relation to the others.

You may have noticed that this version of my logo looks a little... messy though? SVG paths are a consistant width the whole way along. We can change the overall stroke-width and the shape of the stroke-linecap but we can't do much more than that.

Enter <clipPath>, we can use clip path to "cut out" a more stylised shape.

SVG <clipPath>

SVG clip path can be used to clip (or hide) parts of SVG elements according to a certain path. The parts of the shape inside the <clipPath> are visible, and the parts outside are hidden.

This is a great CSS tricks article if you want to know more.

Lets go back to our little line animation.

In illustrator I drew out the path that we animated (purple), and then I drew a shape over the top (black). This will be used as a clip path.

This is what the syntax for a clip path looks like in SVG

<svg>
  <clipPath id="myClipPath">
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <path clip-path="url(#myClipPath)"... />
</svg>

Anything you put inside the clip path element will be used as a clipping object. You reference a clip path on the clipping target using an ID

You can also reference a clip path in CSS like this:

.element {
  clip-path: url('#myClipPath');
}

This is what the line animation looks like with a clip path applied. Much Nicer!

See the Pen SVG stroke dashoffset demo - clip-path by Cassie Evans (@cassie-codes) on CodePen.

For my logo animation I created a clip path for each stroke.

So the end result looks like this!

See the Pen Cassie! - with clip paths - break down by Cassie Evans (@cassie-codes) on CodePen.

The duotone effect

I've created the duotone effect by animating two paths instead of one along each section, one purple and one green.

These paths are grouped together in a <g> element which is the target for the clipping area.

See the Pen SVG stroke dashoffset demo - Stagger - animated with GSAP by Cassie Evans (@cassie-codes) on CodePen.

Squash and stretch.

The final cherry on top is the little dot on the i. 💚

In order to make a realistic bounce, the element needs to abide by the squash and stretch animation principle.

This helps make the movement feel more lifelike. The i should squash and stick to the ground at the bottom of the bounce and stretch out at the top. You can definitely achieve this with some really fine tuned keyframes or individual, overlapping tweens. But GreenSock make it easier for us with their Custom Bounce plugin.

Using the plugin you set a few parameters and it creates an ease for the bounce and for the squash and stretch.

strength determines how bouncy the ease is and squash determines how long the squash should last.

CustomBounce.create('myBounce', {strength: 0.7, squash: 3, squashID: 'myBounce-squash'});

You can then use that bounce ease the same way you would use a normal ease in a GreenSock tween, by referring to it in your tween parameters. The squash ease ID will be whatever the ID of the bounce is plus -squash appended to the end, for example, ease:"myBounce-squash"

tl.to('#ball', duration, {y: 550, ease: 'myBounce'}).to(
  '#ball',
  duration,
  {scaleY: 0.5, scaleX: 1.3, ease: 'myBounce-squash'},
  0
);

See the Pen Video: CustomBounce from GreenSock by Cassie Evans (@cassie-codes) on CodePen.

The final animation

Put all of that together along with a bit of timing finetuning and easing tweaks and we have our final logo animation!

See the Pen Cassie! by Cassie Evans (@cassie-codes) on CodePen.

If you make an SVG path animation I would love to see it! My twitter DM's are also always open if you get stuck.

Just pop me a message!