This week: Clocks, Cats, and Contacts
The Weasley Clock
Olivia Ng animates the Weasley family's status-updating clock from the Harry Potter series with SCSS and a dash of Splitting.js.Sponsored:
Deliver Netflix-grade video with any sized development team
Add scalable live and on-demand video to any app, using any web framework. Mux Video API uses machine learning to host, encode, and deliver video more efficiently and at higher quality.
You know you cannot escape the Cybertruck. David Khourshid's rendition is complete with "armored glass" windows that work just like the real thing!
Matthew Williams shares a bit of character-building UX: "The world's most unintuitive volume control slider if you decide to add gravity to the mix!"Sponsored:
WordPress powers 31% of the internet. Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tool.
Bongo Cat Codes
Bongo Cat is one of us now, thanks to Caroline Artz and SCSS.
CodePen Radio #246: Pop Out Previews
Klare, Stephen, and Marie talk about the latest feature CodePen launched: grid modal view. How did we build this? Why did we build this? And, more importantly, what do we call it?
A Layout Trick for Building a Contact List
Michelle Barker demonstrates how to use three different CSS properties: grid's max-content, inline-block, or inline-flex, to create list items whose width is set by the longest item in the list.
ycw continues a series of BabylonJS experiments with a rotating lawn of magnificent sparkling grass.
Star Wars Dark/Light Toggle w GSAP 3
Decisions, decisions. Choose your side in the Star Wars saga with Kasper De Bruyne's GSAP3-powered saber toggle.
Rolling Range Slider
A penguin rolls through the range in this adorable slider from pwambach.
It's amazing what you can do with just cubes! jh3y creates a staggering animation with nesting cubes and Zdog. Pop open the dat.gui controls to change the size and colors for your own stunning display.
For the final week of the Board Games challenge, we brought out the Scrabble board! Check out the Pens from week four, including "Stranger Things Scrabble" from Dilx.
Animation with Progress Bars
You can tell noot2 is making a lot of progress with animation in this Pen (get it?)