Combining scroll-driven animations and SVG path animations to rebuild Apple's pencil draw animation
In this tutorial we will combine an age old technique to animation SVG paths, and combine it with super modern scroll-driven animations to rebuild a beautiful animation.
... Almost ready!
Last week I came across this Tweet by Wes Bos where he showcased a super neat animation on Apple’s website. I couldn’t stop but notice that Apple still used some JavaScript to pull of this effect, while there is a super modern way to do this with just CSS (see below for browser support).
So I decided this was the perfect opportunity to finally show you all how you can animate SVG paths, and combine it with scroll-driven animations.
I saw this nifty CSS Video Masking technique on the iPad website.
— Wes Bos (@wesbos) July 18, 2024
Pretty neat use of CSS - not what I expected! pic.twitter.com/MZIgpmeunp
A note on browser support
At the time of making this tutorial (july 2024) the animation-timeline is supported in Chromium browsers, with Firefox and Safari working hard on it. In Firefox you can even already experiment with it behind a flag.
Take a look at the diagram below for the latest status.
Eager to learn more?
I think this video might be a good fit for you too!
