So much going on this week! We learn how to create the VueConf logo in SVG, we tackle the old problem of expanding and collapsing animations, take on some fun ThreeJS animation, and wind back the clocks to revisit an old classic.

♥️

Donovan at CSSAnimation.rocks

Articles

How to Create the VueConf Load Animation — medium.com

A very thorough guide to how the VueConf SVG and CSS animation was put together.

Building performant expand & collapse animations

When making expand and collapse effects you can use scale transforms to keep your UI performant.

Tunnel animation (Part 1)

A step-by-step guide to creating a cool 3D tunnel effect using ThreeJS.

Clocks - CSS Animation

Building and animating a working clock using CSS to animate the hands.

Featured

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

You've learned the basics of CSS animation and transitions, but how do you apply them to a real project? In this epic course Donovan Hutchinson leads you through every stage of building animation into a landing page, from the hero header to interactions and more.

Inspiration

First Bite Type R Animation

A sandwich assembles itself into the logo in this bouncy animation 🥙

Rulers of the Sea (animated)

Super cute animation - hover to see the shapes rearrange themselves ⛵️

Folder

Nice folding paper effect.

Baymax

Get a scan from the star of Big Hero 6 👨‍⚕️

Layered Button

A neat little layered button hover effect.

IOS 10 message popup CSS

This iOS-style message animation is quite lovely 📱

That's all for this week! Don't forget that the price for the course, Level up your CSS animations skills goes up soon. Get in while it's over 50% off!