View profile

CSS Animation Weekly #162

So much going on this week! We'll start by exploring adding animated box shadows to elements, and bui
CSS Animation Weekly #162
By CSS Animation Weekly • Issue #162 • View online
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
How to animate box-shadow with silky smooth performance
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
tobiasahlin.com  •  Share
React Slider with Parallax Hover Effects
React Slider with Parallax Hover Effects
Codrops brings you a walkthrough of how to build a React-based slider with parallax effects
tympanus.net  •  Share
Featured
Support CSSAnimation.rocks on Patreon
Support CSSAnimation.rocks on Patreon
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.
www.patreon.com  •  Share
Inspiration
A cute little disc swings across in this 3D toggle switch animation
codepen.io  •  Share
This time a more pseudo-3D approach to the humble checkbox. Push that button!
codepen.io  •  Share
Unreal what can be done with CSS! This is a pattern applied to the H1 element (which is then animated)
codepen.io  •  Share
Sorry not Sorry
Sorry not Sorry
Squishy and tactile variable fonts make this page stand out!
sorrynotsorry.resn.co.nz  •  Share
Bring back skeuomorphic designs! This shiny 3D-style animated stack looks amazing 🥇
codepen.io  •  Share
This is a cute take on the burger-to-X animation approach, introducing a bit of character
codepen.io  •  Share
Best seen in Chrome - this uses Splitting.JS to split the text into words and animates them with a laser-style edge
codepen.io  •  Share
A subtle and cute little animation switching between FLIP and FLOP using a 3D transform
codepen.io  •  Share
Animation in the real world
Save whales
Save whales
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.
save-whales.com  •  Share
Did you enjoy this issue?
CSS Animation Weekly

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue