Newsletter • Issue 47
Escape from Jaws, GSAP Eyes, and CSS Knobs!
LiveStream Shows
On Tuesday, we’ve got Varun Vachhar on the stream to teach us about self-avoiding random walkers! It’s a fun, creative coding technique that can produce beautiful results. Varun will show us how to use them to create wonderful art pieces!
Follow on Twitch so you know when we’re live!
Escape from Jaws
This CodePen is a game that’s best experienced with a mouse and headphones.
As soon as you click Start Game, you need to move your mouse around the blue window and listen carefully for the iconic Jaws theme. If you hear “duuunnnn duuuuunnnn” you’re in a little bit of danger. If it’s “dun dun dun dun dun” you’re about to be food.
The coolest part is that the music comes from the shark’s direction relative to your mouse.
By using a great JS audio library called Howler, Simon is able to achieve that stereo effect with the stereo() function. stereo(-1.0) is far left, stereo(1.0) is far right, and stereo(0) plays the music through both speakers equally.
The other clever part is how Simon uses GSAP to animate the shark to its target. Here are basic directions for how it works:
- Set the current mouse position as the destination
- Start a GSAP tween towards the destination for a set
duration - When complete, decrease
duration, increasing the speed. - Find the new cursor position and repeat.
If you want an advantage, or just want to see the script in action, add this line of CSS to reveal the predator’s location:
.jaws {background: red;}
This is why horses avoid the ocean.
Check out Escape from Jaws on CodePen.
CodePens
CSS Knob Range Slider — codepen.io
Check out this slick skeuomorphic knob for a range slider by Shadow Shahriar.
Not only is it stylish and keyboard accessible, but it’s all one <input> element! The shadow, numbers, and “MIN” and “MAX” are all added with background-image to that one element.
Eye Movement with GSAP — codepen.io
This SVG GSAP animation by Celli is lovely, and feels like a Kurzgesagt animation in all the best ways!
The different durations and eases make it feel realistic, and the dilating pupil and moving eyelids are a wonderful touch.
Inspiration Search Bar — codepen.io
Fun CSS animation revealing a search bar by Martin Pitt. Great use of SVG paths and particle effects to add a bit of magic to a standard web element.
Articles
New CSS Features In 2022 — Smashing Magazine — www.smashingmagazine.com
A wonderful deep dive into everything new in CSS in 2022 by Michelle Barker. She talks through Container queries, :has(), the new CSS Color functions, Cascade Layers, and lots more!
For each, she explains what they are, how you can use them, and if they’re ready in our browsers yet.
So Long, Partner
That’s it for this week!
I hope to see you in the chat for tomorrow’s Twitch show. Varun has one of my favorite blogs and makes gorgeous artwork. I’m so excited to learn from him tomorrow.
If you’re liking the newsletter, I think you’ll love our friendly, inclusive Discord Community! If you’re not in any other Discords, we’re a friendly place to start and happy to help.
Until next time!
Your neigh-bor,
Alex