This week we're taking inspiration in scrolling, and learning how to manipulate SVG paths for smoother page transitions.

♥️

Donovan at CSSAnimation.rocks 

Articles

Integrating Animation into a Design System

Keep your animations consistent by taking the time to plan and build out a cohesive animation system.

Scroll Transition Animation Inspiration — medium.com

Scroll transitions! Be inspired by this collection of animations triggered on scroll.

Morphing Page Transition — tympanus.net

Another great tutorial from Codrops - this time SVG page transitions using morphing paths and anime.js.

Inspiration

Emoji Train 🚂 🚃 🚃 🚃 🚃 — codepen.io

Fiendishly clever demo that uses emojis to create an animated 3D train track!

The Dark - CSS animated background — codepen.io

Gorgeous use of image masking and CSS animated particles to bring atmosphere to this image

Parallax.js Design — codepen.io

A great, subtle example of mouse-movement parallax movement

BlackHole Particle Eater — codepen.io

I love the blur effects on this particle demo

Glitch effect strobocops — codepen.io

80's video style effect created with CSS 🤖

Loaders!

A neat collection of CSS-only loading effects to try out 🎉

deep structure — codepen.io

I don't know how this is so smooth. Lovely example of a never-ending full-screen 3D fly by demo.