Newsletter • Issue 68
Gradient Paths, Loading Disco, and Particle Dancing!
This Week’s LiveStream
A11y & Responsivity with GSAP — frontend.horse
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!
CodePens
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.
Apple Keynote Animation — codepen.io
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.
Articles
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.
Adventure game graphics with DALL-E 2 — hpjansson.org
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.
Inspiration
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.
Particle Dancer — carla-flow.vercel.app
Just an incredible combination of flow effects and motion capture, all in Three.js. This is one you’ve got to see in motion.
Resources
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.
Your neigh-bor,
Alex