Happy Monday! Today we explore how to create responsive, animated image galleries, animate with SVG and learn some very cool pure-CSS cardboard box animations!

❤️ Donovan at CSSAnimation.rocks

Articles

Responsive Image Gallery With Animated Captions — moderncss.dev

Not just captions but animated hover effects too, and lots of good info on accessibility in this tutorial.

Animate Anything Along an SVG Path — tympanus.net

Learn how to code creative animations with JavaScript using SVG paths and the getPointAtLength() function.

How to Make a Pure CSS 3D Package Toggle — css-tricks.com

After the holidays we all have a lot of boxes, so what better time to explore packing them back up again. This awesome tutorial from Jhey Tompkins explains how, using CSS.

Inspiration

Out-of-Bounds

Generating and disposing of objects in Three.js and Cannon.js - a great demonstration of how to optimise to display lots of objects by removing them from a scene at the right time

Double Helix

This double helix is almost-alive looking 🧬

Isometric Color Picker

This gorgeous colour picker has a very satisfying selection animation

Animation in the real world

Magical Reflections: a virtual art experience — www.magische-spiegelungen.de

Explore a virtual gallery in your web browser!