On-Scroll Image Layout Animations

An exploration of different scroll based layout switch animations.

Article on Codrops

Demo

Installation

Run this demo on a local server.

Credits

• Images generated with Midjourney, except one photo by Karsten Winegeart on Unsplash
• New images in Layouts 02 (the carousel, the pyramid, and galleries 4, 5, 6, 8 and 9) generated with Nano Banana in Paper
• The sun's images in Layouts 02 are page 1's, recoloured here in faded tones
• The sunflower's images in Layouts 02 come from Staggered (3D) Grid Animations (generated with Midjourney, MIT), recoloured here as a two-ink duotone
• Layout animations with GSAP Flip and ScrollTrigger
• Smooth scrolling with Lenis
• Font: Tenon (Adobe Fonts)
• Inspired by this demo by Framer University, based on VRTL WORLD

Misc

Follow Codrops: X, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops