Welcome to this week's CSS Animation! Today we'll be looking at some interesting IntersectionObserver tricks using Svelte, as well as looking into dragging things around with React, and loads more.

♥️ Donovan at CSSAnimation.rocks

Articles

Lazy Loading Images in Svelte — css-tricks.com

When build a front-end application we want to make sure it's fast, and one way is to only load images that appear on-screen.

It's called Lazy Loading and I've written an article on how we can achieve this technique when building websites using Svelte.

How to Use useDrag With React — medium.com

Learn how to create a tactile dragging effect with React hooks and Spring

Featured

Shop Ireland — www.shopireland.ie

Thanks to everyone who has taken the time to check out my little shopping website and given feedback. Along with the "lazy-loading" images I'm working on lots of ways to make it better, faster and easier to use.

Inspiration

Full CSS Neumorphic Joystick

Amazing bit of a neumorphic design animated using CSS!

CSS is cake 🍰

Battenberg no less! Delicious work here 

Turning cards animation in 3D with CSS only

Great example of 3D animated cards with no JS! Check out the full explanation https://3dtransforms.desandro.com

Lovely Envelope

Reminds me of the logo of this newsletter! A nicely animated love letter

Animation in the real world

Stripe redesign — stripe.com

Beautiful colour transformations, and loads of subtle, beautiful animations throughout