Scroll-Based Layout
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.
Comments are closed.