Oct 9, 2017

CSS Animation Weekly #63 - Pure CSS Button, GSDevTools and more

CSS Animation Weekly #63 - Pure CSS Button, GSDevTools and more

By CSS Animation Weekly • Issue #63 • View online

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

Making a Pure CSS Play/Pause Button

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

css-tricks.com • Share

Tools

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.

greensock.com • Share

Inspiration

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

codepen.io • Share

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

codepen.io • Share

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

codepen.io • Share

Gotta Have That Pixel 2, Huh?

Nice transitions on this HTML and CSS Pixel 2 mockup 📱

codepen.io • Share

Minimalist Newsletter form

Minimalist Newsletter form

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

codepen.io • Share

Exploding bomb SVG animation

Exploding bomb SVG animation

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

codepen.io • Share

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

codepen.io • Share

Arrow (CSS transitions)

Arrow (CSS transitions)

A simple little arrow building itself out of blocks ↓

codepen.io • Share

Animation in the real world

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.

pageclip.co • Share

Did you enjoy this issue?

CSS Animation Weekly

By CSS Animation Weekly

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here

If you were forwarded this newsletter and you like it, you can subscribe here

Powered by Revue