Scroll-Based Layout Animations

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

Today, I want to share a compilation of on-scroll layout animations with you. You’ve probably come across these animations on many websites. The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip, which seamlessly transition the layout to a new design.

This is partly inspired by this beautiful demo made by the folks of Framer University which is based on VRTL WORLD.

The way I could easily do this kind of animation is by working with a class-based switch. Using the flip plugin is a great way to transition to a new layout and you can properly test your styles before adding any JavaScript whatsoever.

You can create an initial layout and then based on a switch class, you style the end state of it. Flip takes care of the rest. Of course you’ll have to tune some details but it’s a good start.

Here are some examples of initial and end states:

Here we go from a grid view to a fullscreen image view. We also animate the inner element with the image:

This next example is an irregular grid. It becomes a stack of images and a title appears on top of it:

I really hope you enjoy these examples!

Just for fun: can you find the image that was not generated by AI? 😉

Let us know on Twitter.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!