This week we're learning how to make some cool slide-up animations, building infinitely scrolling lists, and checking out some amazing and inspiring animation work from around the world!

♥️ Donovan at CSSAnimation.rocks

Articles

CSS-only Slide-up Caption Hover Effect — css-irl.info

A walkthrough of how to create a useful image caption animation. Play around with timing functions to see how slick you can make it!

windups — windups.gwil.co

If you use React you might want to bookmark this handy tool to create animated typed text!

An Infinitely Scrollable Vertical Menu — tympanus.net

Sometimes you want to create a scrolling list with loads of items, and not slow down your browser. This quick-look from Codrops is a handy reference on doing so

Featured

Modern CSS

Whether you're learning CSS or needing a refresher, you should check out this new book from Joe Attardi. Learn all about layout, Flexbox, Grid and even CSS animation ✨

Inspiration

To Do List

Lots of subtle GSAP animations make this ToDo list interaction feel slick - see how many animations you can find!

Folding Ticket Detail

Select a flight to see a 3D folding effect

Pure CSS octahedron inside and outside

Some amazing work here on this pure HTML/CSS octahedron!

Pure CSS 3D octagonal rings

Nice use of Pug and lots of maths to crate this gradient-filled pure CSS 3D octagonal demo

Single div CSS ball toss

Very cool demo showing a ball jumping between two holes, created entirely with one div and animated using CSS (doesn't work in Safari btw)

Diamonds Animation

Some canvas-based patterns. Worth exploring to see the simple function used to create this effect