Jan 24, 2022

CSS Animation Weekly #285

By CSSAnimation.rocks • Issue #285 • View online

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

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

moderncss.dev • Share

Animate Anything Along an SVG Path

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

tympanus.net • Share

How to Make a Pure CSS 3D Package Toggle

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.

css-tricks.com • Share

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

codepen.io • Share

Double Helix

This double helix is almost-alive looking 🧬

codepen.io • Share

Isometric Color Picker

This gorgeous colour picker has a very satisfying selection animation

codepen.io • Share

Animation in the real world