Newsletter • Issue 30

GSAP Gravity Slider, Starry Shader, Astro, and Generative Noise!


Live Stream Episodes

GSAP Gravity Slider

Ryan LaBar joined us to make this Star Trek inspired “Gravity Preference” slider with some great GSAP plugins. Ryan showed us how to style a range input, and how to use GSAP’s Draggable to create a wonderful knob-style interface.

Check it out on CodePen

Watch the video on YouTube

Starry Space Shader

Shader artist ilithya built out a starry space shader with us live on stream! I’ve been slowly learning shaders through our fantastic guests, and I loved the techniques ilithya brought to us.

Check it out on CodePen

Watch the video on YouTube

Building with Astro & Prismic Building with Astro & Prismicwww.youtube.com

Astro is a new static site generator that lets you template with React, Vue, Svelte and more! The best part is that you can render those templates at build time and ship as little JavaScript as you’d like!

It’s a brilliant new way to build websites, and this episode walked us through starting a site and connecting it to Prismic CMS.

Using Noise in Generative Art - George Francis Using Noise in Generative Art - George Franciswww.youtube.com

George Francis is back to dive deeper into generative art! We learned about simplex noise, and made some wildly cool effects with it. Check out the SVG gradient grid we made at 58 minutes!

Should we invite George back a fifth time? I’m leaning towards yes…

CodePen

Cutout CSS

I really like this text effect from Stephanie Eckles, and while the styling is great in its own right, she’s using a technique I want to point out.

Content with Data Attributes

Steph needs a couple instances of the word CSS to create the effect, and yet here’s the entirety of the HTML.

<h1 data-text="CSS">

<span>CSS</span>

</h1>

You might have spotted the second “CSS” in the data-text attribute, but the cool part is how that information is utilized. Steph uses a lesser known CSS function called attr(), which pulls in the value of data attributes and is used primarily alongside the content property.

h1::after {

content: attr(data-text);

}

She’s pulling it from the data-text attribute set on the h1. Steph could have set content: 'CSS' in the CSS, but what if you want to use this style across all headings on your site?

The data attribute allows you to keep your content in your HTML and the styling in the CSS. Plus attr() is scoped to the element, so no need for unique data attributes.

Inspiration

A Promise Broken | Social Mobility in the Digital Age | L'Atelier A Promise Broken | Social Mobility in the Digital Age | L’Atelieratelier.net

This is scrolly-telling at its absolute best. Incredible art direction and data visualization with 3D and 2D elements.

Benjamin Righetti — Concert Organist Benjamin Righetti — Concert Organistbenjaminrighetti.com

Tasteful use of GSAP ScrollTrigger and animations to create a striking website for this concert organist.

Upcoming Shows

I’m on vacation this week, but we’ve got a stellar lineup when I get back!

Creating Private Content with Auth0, Next.js, and Prismic!

James Q. Quick | Tuesday, September 28th

Incredible Effects with Three.js

Luis Bizarro | Wednesday, September 29th

Learning the CUBE CSS method

Andy Bell | Thursday, September 30th

GSAP Community Questions

Cassie Evans | Friday, October 1st

View all upcoming shows

So Long, Partner

Before we go, I want to welcome you over to our Discord, which has quickly become one of the coziest places to hang out and chat about web dev. We’d love to have you.

Check out the Discord

Also, this was my first issue switching over to Revue from Mailchimp. The main reason for moving is to remove friction from the writing and signup process. Let me know what you think!

Until next time!

Your neigh-bor,

Alex