This week we're exploring some React-based animation tricks! Lazy loading, hooks, and more.

♥️ Donovan at CSSAnimation.rocks

Articles

Using Framer Motion to Create Smooth Lazy Load Image Effects — prototypr.io

Loading dynamic-height images can be tricky and this set outs interesting approach to using Framer Motion to lazy-load images in React.

Don't Stop Me Now: How to Use React useTransition() hook — dmitripavlutin.com

A helpful guide to managing UI updates to improve overall React performance

How to Code the K72 Marquee Hover Animation — tympanus.net

Another bold and striking effect from Codrops. Recreate the direction-aware marquee menu hover animation seen on the website of K72 made by Locomotive

Featured

UI Animation in React — cssanimation.rocks

On this site we’ve explored loads of big impressive animations. I thought it would be worth stepping back and looking at how small UI animations can add up, and introduce a handy React utility I made.

Inspiration

literally lit elements

Nice use of "data-" properties to control the colours in this soap-bubbly UI

Temporal Case Studies POC

A neat hover effect that gives the text quotes a feeling of space

Image Hover Effect (Door Opening)

An unusual hover effect, where the image zooms and rotates. May make people a little ill in my opinion!

Fluid Paint

Amazingly realistic-looking paint simulation!