Sep 2, 2019

CSS Animation Weekly #162

By CSSAnimation.rocks • 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

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

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

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

3D Switch animation

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

codepen.io • Share

Sketchy Pseudo-3D Switch Checkbox

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

codepen.io • Share

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)

codepen.io • Share

Sorry not Sorry

Squishy and tactile variable fonts make this page stand out!

sorrynotsorry.resn.co.nz • Share

Gold Tiles

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

codepen.io • Share

Awesome CSS Animation Hamburger Menu

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

codepen.io • Share

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

codepen.io • Share

Flip Flop animation

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

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?

By CSSAnimation.rocks

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

Tweet

Share

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.