Newsletter #68 - Gradient Paths, Loading Disco, and Particle Dancing!
How to do gradients along a path, a delightful loading spinner, and a scheduled GSAP livestream!
This Week's LiveStream
The wonderful Cassie Evans is back on the stream this Tuesday!
Cassie will show us the new gsap.matchMedia()! It's a new feature that makes responsive and accessible reduced motion animations simple!
You can't apply gradients to SVG's stroke property, so there's no built-in way to create gradients on a path.
But there is a way, and it doesn't use a single gradient. Instead, you create a couple hundred rectangles along the path, each with a slightly different color.
Mike Bostock figured this out back in 2013, and this CodePen is Noah's take on it. It uses GSAP's MotionPathPlugin to find the points, and a touch of D3 to get the rainbow values.
The gradient pen above reminded me of this piece by Louis Hoebregts.
While it looks similar, Louis is using canvas to render the gradient. The delightfully bouncy animation is all GSAP.
There isn't a framework that I enjoy building with more than Astro, and it's just hit v1.0!
It ships only the JS you need, but lets you build in React, Vue, Svelte, and lots more. The DX is great, and like all good things it uses Vite. It has first-class Markdown/MDX support, and pulling in data from a CMS like Prismic is so simple.
I enjoy Astro so much, you'll even see my name in the testimonials!
This isn't an ad, I just really like Astro.
People are finding such clever ways to use the incredible DALL-E 2. Here the author creates images and then pixelates them to achieve the old-school adventure game aesthetic.
Shared by Kilian in the Discord community.
Upgrade your loading spinner with this slick "Loading Disco" by Joe Bell.
The button stroke's gradient spins around as it loads. Damn is it fun to watch.
Stunning 3D visuals and a clever "text message" interface, but I'll let their description speak for the excellent content:
Welcome to our DMs! Seen is a collection of chats exploring the interplay between race, ethnicity, and our creative practices and careers, by a group of East and South East Asians in the design industry.
Just an incredible combination of flow effects and motion capture, all in Three.js. This is one you've got to see in motion.
Check out this comprehensive guide on color, made for UI designers. This will be my new go-to when trying to sound smart talking about color.
Shared by Mike in the Discord community.
So long, partner
Thanks for riding along! I hope to see you at Thursday's stream! Cassie is always a delight to have on.