So much going on this week! We'll start by exploring adding animated box shadows to elements, and building a fancy React slider. Then we have a bumper week of inspiring CSS animation demos!

♥️ Donovan at CSSAnimation.rocks

Articles

How to animate box-shadow with silky smooth performance — tobiasahlin.com

Adding shadows to elements can be a good way to help them stand out, such as on hover. Explore ways to do so without impacting performance

React Slider with Parallax Hover Effects — tympanus.net

Codrops brings you a walkthrough of how to build a React-based slider with parallax effects

Featured

Support CSSAnimation.rocks on Patreon — www.patreon.com

Help keep this newsletter going! So far I'm just over 50% of the way to being able to cover the monthly newsletter hosting costs, thanks to people like you pledging just a dollar per month.

Inspiration

3D Switch animation

A cute little disc swings across in this 3D toggle switch animation

Sketchy Pseudo-3D Switch Checkbox

This time a more pseudo-3D approach to the humble checkbox. Push that button!

CSS Pattern On H1 Element

Unreal what can be done with CSS! This is a pattern applied to the H1 element (which is then animated)

Sorry not Sorry — sorrynotsorry.resn.co.nz

Squishy and tactile variable fonts make this page stand out!

Gold Tiles

Bring back skeuomorphic designs! This shiny 3D-style animated stack looks amazing 🥇

Awesome CSS Animation Hamburger Menu

This is a cute take on the burger-to-X animation approach, introducing a bit of character

Splitting: Laser Write

Best seen in Chrome - this uses Splitting.JS to split the text into words and animates them with a laser-style edge

Flip Flop animation

A subtle and cute little animation switching between FLIP and FLOP using a 3D transform

Animation in the real world

Save whales — save-whales.com

Whales are wonderful creatures. This site does a lovely job of highlighting how amazing they are, along with stunning animations and 3D models. Check it out.