Newsletter #68 - Gradient Paths, Loading Disco, and Particle Dancing!

August 22, 2022

How to do gradients along a path, a delightful loading spinner, and a scheduled GSAP livestream!


This Week's LiveStream

A11y & Responsivity with GSAP A11y & Responsivity with GSAPfrontend.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

Gradient Path Gradient Pathcodepen.io

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 Apple Keynote Animationcodepen.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

Astro 1.0 Astro 1.0astro.build

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 Adventure game graphics with DALL-E 2hpjansson.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

Loading Disco Loading Discojoebell.co.uk

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.

SEEN SEENwww.seen.space

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 Particle Dancercarla-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

Color & Contrast

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

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters