Newsletter • Issue 66

SVG Waves, Self-Balancing Headlines, and Glowing Marbles!

Did someone send this to you? You can subscribe here! If you like the issue, forward it along to someone. Each issue takes a few hours and your support is always appreciated.

Tri Wave - SVG + GSAP

I want to start off by drawing your attention to this awesome CodePen by Chris Gannon.


At first, it seems like he’s masking these shapes, but the solution here is a lot more clever.

If you take out the GSAP animation, we can see the start of the SVG, which is just a series of lines with different heights.

Chris is using GSAP’s DrawSVG plugin only to draw part of the line and animate how much is drawn. Using percentages he’s telling it to animate between 0-20% and 40-69%.

The line in three stages: Full (0-100), 0-20, and 40-69.

So now we see how he’s animating each individual line, but how does he make these perfect little waves from individual lines?

The sine wave shape comes from the ease that Chris is using. He’s animating each with ease: 'sine.inOut'. Combining that with a stagger shows the ease’s shape.

The cool thing is that the sine wave isn’t special; we can do this with any type of ease! Check out what happens when we change the ease to something else.

Four examples of eases

It’s a great technique and a wonderful pen.

Check out Tri-Wave.


Headline balancing Headline

This clever demo solves the issue of unbalanced headlines.

Instead of the headline:

My Cool Blog Post about


This technique distributes the text across lines so you’d get something like:

My Cool Blog

Post about CSS

Glowing Marbles Glowing

For this week’s CodePen challenge, KrautGTI made this fun Three.js scene with glowing spheres jumping out of their tubes.

NYC Moment NYC

Check out this delightful single div cityscape with an animated train.


Solving “The Dangler” Conundrum Solving “The Dangler”

Dave has a solution for a classic web design issue: How do you make items look good when there isn’t enough to fill the row?

The solution? Container Queries and :has(). It’s a preview of what is to come once these land in all browsers, but that’s not far off.

Statements Vs. Expressions Statements Vs.

I’m glad the question of “what is the difference between a statement and an expression” never came up in an interview, as I would have bombed it.

Josh’s article gets into the details of each and shows why they’re important concepts to keep separate.

The Study of Shaders with React Three Fiber The Study of Shaders with React Three

This is a stunning guide from Maxime Heckel on how to create shaders with React Three Fiber. This is a wonderful starting point if you’re not familiar with shaders, or have never used them with R3F.


Hubble vs. Webb Hubble vs.

Our friend Arpit in the Frontend Horse Discord made this interactive demo comparing the Carina Nebula images from the Hubble and Webb telescopes.


DOM-ready events considered harmful DOM-ready events considered

Our friend Cassie Evans sat down with Jake Archibald for a handful of HTTP 203 episodes that you should check out. This one digs into why shouldn’t use DOM ready events and instead add defer to the script tag in your HTML.

So long, partner

That’s it for this issue! As always, thanks for reading and I hope you have a wonderful week.

Your neigh-bor,