Home|About|Gaming cabinet|Archives|How it works|Starter sites

GeezerVison is showing github.com — GitHub - codrops/ScrollBasedLayoutAnimations: An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.

Open more actions menu

Latest commit

History

3 Commits

Folders and files

Name		Name	Last commit message	Last commit date
css		css
img		img
js		js
.gitattributes		.gitattributes
.gitignore		.gitignore
AGENTS.md		AGENTS.md
LICENSE		LICENSE
README.md		README.md
favicon.ico		favicon.ico
index.html		index.html
index2.html		index2.html
og-image.jpg		og-image.jpg
og-image2.jpg		og-image2.jpg

Repository files navigation

On-Scroll Image Layout Animations

An exploration of different scroll based layout switch animations.

Article on Codrops

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

Made with 💙 by Codrops

About

An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.

Resources

Custom properties

Stars

340 stars

Watchers

6 watching

Forks

Report repository

Releases

Packages

Contributors

Languages