A huge week - explore how we can create 3D-style animations in 2D, lots of mouse-event parallax animations and learn about the new jumps spec for CSS animation!

♥️

Donovan at CSSAnimation.rocks

Articles

How to render 3D in 2D canvas — www.basedesign.com

A great example of animation using a faux 3D effect in 2D!

Jumps: The New Steps() in Web Animation — danielcwilson.com

Read about the new jumps spec and how it can be used on CSS animations! (This article best viewed in Firefox until the spec is adopted in other browsers)

Inspiration

3D-ish Hamburger Menu — codepen.io

On the topic of pretend-3D check out this 3D-ish burger nav! 🍔

Pseudo 3D text — codepen.io

Super-slick text effect!

Layered parallax effect — codepen.io

A nice little effect that tracks multiple layers on mouse move 

3D SVG Icons with React — codepen.io

Mouse move animation showing some game console controllers

Watercooler Animation — codepen.io

Subtle CSS animation at the water cooler 💦

Bonsai animation — codepen.io

Subtle and lovely bonsai tree animation 🌴

Animated Card Loading — codepen.io

Some simple animation for loading cards into your UI

Parallel dimension — codepen.io

Amazing organic-looking canvas effect

Happy International Women's Day — codepen.io

Lovely CSS animated text for International Women's Day ♥️

trinagleSpiral - homage to Algorave — codepen.io

Hypnotising triangular spiral animation ꩜

Animation in the real world

5s — 5scontent.com

Some fun z-index effects and scroll animations here