So much going on this week! We begin by learning how to build and animate a play/pause button, as well as checking out the brand new GSAP animation timeline tool, GSDevTools. As well as this you'll find a load of inspiring animations being created using HTML and CSS this week.

♥️

Donovan at CSSAnimation.rocks

Articles

Making a Pure CSS Play/Pause Button — css-tricks.com

A simple yet universal interface element, the Play button. Learn how to build and animate the play/pause state in this article.

Tools

GSDevTools

If you're using GSAP for web animations check out this awesome visual tool for inspecting and developing your animations. GSDevTools is a set of visual playback controls with all sorts of great features.

Inspiration

Yoshi's Island — codepen.io

Nostalgia Island! This 3D animation is incredible - all created with HTML elements and JavaScript 😻

planet pen — codepen.io

Just gorgeous use of colour and animation on this planet badge 🚀

Jaws — codepen.io

Like opening the inspector on a web project, beware what lies beneath! 🦈

Gotta Have That Pixel 2, Huh?

Nice transitions on this HTML and CSS Pixel 2 mockup 📱

Minimalist Newsletter form — codepen.io

Interesting bit of interaction on this newsletter signup form, which animates into a signup form ✍️

Exploding bomb SVG animation — codepen.io

Not entirely sure what I expected here. Light the fuse, cartoony bomb goes boom 💥

Dreams — codepen.io

I love the glitchiness of this demo - it makes the most of the stretched-out HTML element and animation 🛣

Arrow (CSS transitions) — codepen.io

A simple little arrow building itself out of blocks ↓

Animation in the real world

Pageclip — pageclip.co

As well as being a handy service for when you want to collect user data, Pageclip uses animation nicely to tell the story of how their product works.