Hello friends! 👋
Before we dive in to this month’s newsletter -
I’m really excited to share that I’m hosting an SVG animation workshop this October for the Smashing crew!
I’d love to have you along, so do check it out.
x - Cassie
☕ If you’re enjoying this newsletter, you can buy us a coffee or contribute towards our newsletter costs here.
💌 Let’s open up the box and see what’s inside…
This month’s viewBox edition is all about line drawing animations. You know, those illustrations that come to life by drawing themselves out!
This trick is achieved by using a clever combination of stroke-dasharray and stroke-dashoffset. These properties define the pattern and position of dashes in an SVG stroke.
When you create a dash which is the same length as the path and then move the offset of that dash, it looks like the stroke is ‘drawing’ itself in!
Check out the tip & article below to learn how to do it yourself!
💡 SVG tip
In order to create a stroke-dasharray that’s as long as the path itself and animate it in, we first have to find out the path length.
A commonly used method involves using a little bit of JS to calculate the length of the path with getTotalLength().
This path length will often be a long (awkward) decimal.
But you don’t actually have to measure the length of the path, you can set it instead.
The pathLength attribute lets us specify a total length for the path, in user units.
This doesn’t visually change anything, but it will adjust any computations that require the length of the path and make our life a lot easier.
Check out the demo!
✏️ Article
If you’ve checked out Cassie’s website, you may have noticed the logo animation on page load?
This animation uses a combination of stroke drawing and clipping to mimic a variable-width handwriting style.
She’s also using GreenSock’s Draw SVG plugin to do the line animation.
Read ‘Creating my logo animation’
✨ Fun demos
Lisi Linhart’s website – view site
Lisi Linhart just updated her website with a marvelous stroke animation of her head that fades into a real picture. This animation was made using Walkway.
Go and explore the whole website, it’s full of lovely animations!
Lemonade 2019 giveback – view site
The Lemonade site is a great example of using animation to guide a user down a page. They use their brand ‘line-drawing’ style to illustrate different stats as you scroll down.
They wrote up a ‘behind the scenes’ article here which is worth a read.
Cyclist – view on CodePen
Alaric Baraou made use of Greensock’s staggering functionality to animate loads of paths in this absolutely gorgeous demo. The lines give a great feeling of movement and energy.
Perpetual pencil – view on CodePen
This pencil drawing loop by Chris Gannon is so good
Make sure to check out his his other work too! We’re big fans here at viewBox.
🏆 viewBox Challenge!
Each edition we’ll give you a theme to kick-start your imagination. We’ll feature our favourite one in next month’s edition.
Last month’s challenge was SVG Filters
There were a ton of amazing entries, well done everyone! But our favourite was this artistic piece from Evan Sheehan
We loved the abstract shapes and colour pallette.
🎨 This months theme is Stroke Animation
Ideas…
-
Can you recreate your own handwriting using SVG paths?
-
What about creating a illustration using a single unbroken line
-
Can you play around with masking, clipping or SVG filters to create some texture on your SVG path?