This week we're creating some interesting hover image animation effects, revisiting our understanding of the fundamentals of transitions, and loads of great demos.

♥️ Donovan at CSSAnimation.rocks

Articles

Creating a Menu Image Animation on Hover — tympanus.net

A tutorial on how to create a hover effect for a menu where images appear with an animation on each item

Introduction to CSS Transitions — nelsonmichael.dev

A nicely written guide to getting started with CSS transitions including timing functions, delay and duration

Featured

Shop Ireland - Amazon Ireland with Irish prices and VAT — www.shopireland.ie

Looking for an alternate way to search and browse Amazon? While this site is Ireland-based, it might be interesting if you want to see an example of a Svelte application that makes use of lots of subtle UI animations to provide a fast e-commerce experience. Give it a go!

(PS. I made this site myself in my spare time, I hope you like it! - Donovan)

Inspiration

3D banners with ScrollTrigger

An amazing 3D scroll effect made with GSAP

Morphing Toggles

Using the MorphSVG plugin for GSAP to create some very pleasant little toggle effects!

Bookmark

A cute and subtle example of GSAP animation on an SVG bookmark, using keyframes to animate the path

Madeline Floating in the Sky

A lovely pure HTML/CSS animated demo of Madeline floating with a balloon

Skateboarding Cat

So much character in this simple little GSAP cat skateboarder

Firehose - Swissted

Another awesome Swissted poster brought to life with some GSAP

Fly the twitter bird

I love how intensely silly this little Twitter animation is