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 -
and a whole load of drawing stuff out in illustrator.
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.
We can do them with CSS too. So I'll run through a couple of different ways to create the same effect.
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.
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.
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.
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.
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"