CSS Animation Weekly
Posts
CSS Animation Weekly #56 - Animation design, Scroll inspiration, Morphing page transitions

CSS Animation Weekly #56 - Animation design, Scroll inspiration, Morphing page transitions

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

♥️

Articles

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

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.

Emoji Train 🚂 🚃 🚃 🚃 🚃 — codepen.io

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

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 🤖

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.