Newsletter #64 - Range Slider Blobs, Staggered Grids, and CSS Masonry Layout!
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. 🧡
Next week Ryan LaBar is back to break down some of the wonderful effects he built into the new Elegant Seagulls website!
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!
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.
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.
While the images slide up and down in their column, scrolling accelerates their motion thanks to GSAP ScrollTrigger. By Andre Bass.
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.
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.
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.
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.
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.