This week we're learning some fun grid menu animations, creating snake-like form inputs and seeing how MDN is making their docs more interactive. We're also doubling down (twice!) by featuring 4 examples of real world animations! Enjoy :)

♥️

Donovan at CSSAnimation.rocks

Expanding Grid Menu — tympanus.net

Click the "info" link on the bottom left to see this interesting grid menu animate into place!

Create the snake highlight animation with anime-js

Really cool use of SVG to animate between input fields 🐍

Bringing interactive examples to MDN — hacks.mozilla.org

It's great to see the MDN docs continuing to improve. Read about how they're adding interactivity and animation

Featured

Just minutes before the price goes up — courses.cssanimation.rocks

Celebrate this easter by learning how to apply CSS animation to your projects, and get it at a bargain price of $19! I'll be putting the price up today ⏩

Inspiration

Avengers: Infinity Morph — codepen.io

Fantastic example of GSAP animation - Avengers!

Show password CSS only — codepen.io

A nice example of a "show password" interaction with CSS animation

Who's a good boy? This doggo! — codepen.io

A fun example of a CSS-animated doggo 🌭

Floating Island SVG Animation — codepen.io

A couple of subtle animations combine nicely in this floating island

Animation in the real world

Muzzle — muzzleapp.com

When animation helps tell a story it can be very effective. This landing page uses animated "notifications" to help explain their value

Scrumpy — scrumpy.io

Project management product with a ton of character and animations!

Mawla — mawla.io

Loads of nice subtle animation combines with a gorgeous visual design on this new site from Mawla

UI Movement — uimovement.com

Looking for some inspiration? Find the best UI design inspiration here every day!