Welcome to another week of awesome CSS animation! This week we explore scroll-based shrinking headers, and adding cool webGL effects, and lots of greta inspiration.

♥️ Donovan at CSSAnimation.rocks

Articles

How to Create a Shrinking Header on Scroll Without JavaScript — css-tricks.com

A nice little trick for making sticky headers resize on scroll, with only CSS!

🧞‍♂️ Your magic WebGL carpet — github.com

A very small plugin to add a cool WebGL shader effect to your website

Featured

Free Zombie Themed CSS Animation Cheat Sheet — undead.institute

Getting braaains should be fun, so we fill our books, cheat sheets, and newsletters with silliness, zombies, and a whole lot of web development learning. Sign up for our list and get a CSS animation cheat sheet free.

Inspiration

Pure CSS Desk Fan

Try the settings on this fan-tastic pure CSS demo

About Us Pop-Out Effect

A nicely timed, fun hover effect

CSS Magik cube

Tilt your mouse around to see this magic 3D inset cube!

Happy Sushi

Some cute 3D spinning sushi roll