CSS Animation Weekly #207

July 13, 2020

Ease into your week with some canvas-based maths, learn about lights and shadows, created 3D panels and loads more.

♥️ Donovan at CSSAnimation.rocks

Articles

Learn how to create all sorts of different easing effects in canvas

Loads of great examples to teach us how to consider light intensity and angles

Nice work in this demo that divides up an image into panels and positions them in 3D, and you can drag the slider to create an arched effect. Check out the video too 

An interesting demo and video explanation on making circles coalesce onto one point

Featured

I've been working on improving subtle animations across this e-commerce site I run, such as fading the page transitions, lazy-loading images and fading them in when loaded, shopping cart icon animation and things like toast message animations.

I was wondering, is there any particular aspect of this Svelte project you'd like me to blog about and explain the process behind? - Donovan

Inspiration

Good use of GSAP in this little story-telling animation

Cool example of something we can do with the Splitting JS library

I'm not sure why this uses GSAP but it's a cute demo, and I love how the cog wheels mesh

Slick SVG and GSAP morphing demo