Newsletter #30 - GSAP Gravity Slider, Starry Shader, Astro, and Generative Noise!
Howdy, we're going to look at a draggable range slider, a starry shader, generative art, and an introduction to the Astro site generator.
We've had some wonderful people stop by the Twitch stream and make some incredible stuff with us. We've also got some CodePens and inspiration, so let's get to it!
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.
It's a brilliant new way to build websites, and this episode walked us through starting a site and connecting it to Prismic CMS.
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...
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.
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
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.
This is scrolly-telling at its absolute best. Incredible art direction and data visualization with 3D and 2D elements.
Tasteful use of GSAP ScrollTrigger and animations to create a striking website for this concert organist.
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!