A huge week in animation - this week we're exploring the new updates to anime.js, and diving into web animation with some new tutorials. Be sure to check out the awesome demos too!

♥️

Donovan at CSSAnimation.rocks

anime.js version 3 is live — animejs.com

This looks like an awesome, lightweight JavaScript library to bring motion to your UI. Give it a go!

The developer’s guide to native web animation — www.heartinternet.uk

A great overview of some ways we can create animations in UI, using CSS and JavaScript

A Simple CSS Animation Tutorial — medium.freecodecamp.org

This tutorial nicely explains how the animation property works, complete with helpful illustrations!

Featured

Level Up your CSS animation skills — courses.cssanimation.rocks

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials. Get full access for as little as $9!

Inspiration

Slidey radios — codepen.io

An unusual and interesting approach to animated radio buttons

Flipping Out — codepen.io

(╯°□°）╯︵ ┻━┻ with animation!

React Anime Example — codepen.io

See how the new anime.js can be used in a React application!

Toggle bar animation — codepen.io

A gorgeous little transition between the two icon states

<div> within SVG <foreignobject> for 3D effect — codepen.io

It's always cool to see ways of animating with SVG. This time, using some HTML within the "foreignobject" tag

Burger Menu — codepen.io

Literally a burger... menu. Hover each of the patties to see the options 🍔

Nerf This! — codepen.io

A very nifty animation of the Nerf This logo using GSAP

Metal and Fire SVG FX — codepen.io

See the sparks rising from this superheated text!

Stretchy Baby — codepen.io

A very odd stretchy baby demo

Animation in the real world

Case Study: lynnandtonic.com 2018 refresh

See how this responsive, hand-drawn site was built!