Newsletter #64 - Range Slider Blobs, Staggered Grids, and CSS Masonry Layout!

July 8, 2022

Noise mapped to range sliders, a staggered gradient grid effect, a 3D CSS room, some slick GSAP ScrollTrigger work, and some great articles. It's all ahead on the web dev trail, so let's saddle up!


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. 🧡

Upcoming Livestream

Next week Ryan LaBar is back to break down some of the wonderful effects he built into the new Elegant Seagulls website!

Behind the Scenes: Elegant Seagulls Site Behind the Scenes: Elegant Seagulls Sitefrontend.horse

The site just won Site of the Day at Awwwards, and we're going to dig into why it's so great.

Ryan will walk us through the awesome animations, and show us how to recreate some of the components!

Add the event in your preferred place: Google Calendar | Twitch | Discord

CodePens

Range Slider Noise Shapes Range Slider Noise Shapescodepen.io

With a bit of JavaScript, Louis Hoebregts maps simplex noise to a circle of range sliders to make this fun visual.

3D CSS Room for 3K 3D CSS Room for 3Kcodepen.io

Another wonderful 3D CSS piece from Ricardo Oliva Alonso! This time he's celebrating 3,000 followers on CodePen. The TV even has a little slideshow of some of his other pens.

Make sure you click the "3" to experience the full celebration.

Staggered Grid Hero Staggered Grid Herocodepen.io

Check out this cool grid hero concept by Hyperplexed.

When you click a square they change to gradient, radiating out from the spot you clicked. They're using Anime.js and its built-in stagger() to handle the transition.

Vertical Image Scrolling Vertical Image Scrollingcodepen.io

While the images slide up and down in their column, scrolling accelerates their motion thanks to GSAP ScrollTrigger. By Andre Bass.

Interactive Typesetting Properties Interactive Typesetting Propertiescodepen.io

If you've been reading for a while you already know how much I enjoy interactive demonstrations.

You're given sliders for font-size, line-height, letter-spacing, and word-spacing. Tweak each and see its effect on the page's readability.

My preference is only to increase the letter-spacing if the text is ALL CAPS. Otherwise, words can feel a bit too airy for my tastes.

Articles

Style with Stateful, Semantic Selectors Style with Stateful, Semantic Selectorsbenmyers.dev

Another great article by our friend (and Frontend Horse community moderator) Ben Myers!

Ben shows us how to not only show the state of something visually but let assistive technologies know about it.

Masonry Layout in CSS Masonry Layout in CSScss-irl.info

Michelle Barker discusses the current "faux masonry" option we have in CSS, the status of masonry coming to CSS Grid, and her recommendations for letting JS continue to handle this pattern.

ICYMI - Prismic Release Week Recap ICYMI - Prismic Release Week Recapprismic.io

You might know I lead the Developer Experience team over at Prismic. Last week my team organized and launched the company's first-ever Release Week, and it went great!

I wrote this recap to collect all the new developer tools, improvements to our documentation, and community resources.

Frontend Horse Article

Here's a previous Frontend Horse article you might have missed.

Amazing Animation Techniques with GSAP Amazing Animation Techniques with GSAPfrontend.horse

Pete Barr teaches us how he creates beautiful animations with SVG and GSAP. We break down a few pens and pick up a few techniques like text splitting and infinite scroll.

So long, partner

I'm on vacation enjoying the beauty that is Banff, Canada! It's my first time hiking the Pacific Northwest, and I love every second of it. I hope you're having an equally fantastic week wherever you are.

Your neigh-bor,

Alex

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters