Pizza scroll events, designing animated icons with CSS, optimising complex animations, animating CSS grids, and loads of inspiration!

♥️ Donovan at CSSAnimation.rocks

Articles

Scroll animations — cssanimation.rocks

This week I'm sharing a lesson from my course, in which we use a couple of different JS approaches, along with CSS transitions, to animate elements when they scroll into view. Includes pizza!

A Designer's Guide to Animating Icons with CSS — www.newmediacampaigns.com

A nice walkthrough of how to add some SVG animation when creating icons

Story of one animation: WebGL and not WebGL – Yuri akella Artiukh

How a complex animation that would have been massive to download (36mb!) and display was broken up into parts and put together in around 600kb ✨

Animating CSS Grid Rows and Columns — blog.bitsrc.io

Learn how the latest grid features in CSS can be animated

CSSFX - Beautifully simple click-to-copy CSS effects

One to bookmark or reference if you're looking for nice little animation ideas. Be sure to test in Safari though!

Featured

Level Up Your CSS Animation Skills — www.udemy.com

You can do it! Learn how to build and animate all sorts of cool stuff from links to buttons, hero headers, carousels, parallax and more (even scroll-triggered events). Jump in today and save over 90%

Inspiration

Stars Galaxy pure CSS

Nice work with Pug to generate a static-HTML and CSS animated starscape

Tribute to Frank De Winne

Loving the parallax mouse-based movements on these planets. A gorgeous tribute

Letter L

Just like it says, it's a letter L - but built up of SVG layers and nicely animated in 3D

Sun & Earth

Loads of great detail in this little sun and earth rotating demo 🌍

Pure CSS RPG Game

Amazing work creating this pure CSS RPG game - use arrows to move and find your way through the maze ⚔️