Newsletter #66 - SVG Waves, Self-Balancing Headlines, and Glowing Marbles!
We dig into an awesome GSAP + SVG animation, show off a self-balancing headline, and check out some great articles.
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%.
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.
It's a great technique and a wonderful pen.
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
For this week's CodePen challenge, KrautGTI made this fun Three.js scene with glowing spheres jumping out of their tubes.
Check out this delightful single div cityscape with an animated train.
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.
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.
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.
Our friend Arpit in the Frontend Horse Discord made this interactive demo comparing the Carina Nebula images from the Hubble and Webb telescopes.
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.