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.
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.
Building with Astro & Prismic — www.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 — www.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 — atelier.net
This is scrolly-telling at its absolute best. Incredible art direction and data visualization with 3D and 2D elements.
Benjamin Righetti — Concert Organist — benjaminrighetti.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
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.
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