On-Scroll Animation and View Switch

A layout with some scroll animations and a view switch where the content item images animate to a grid.

Today I’d love to share a little layout with you where we have some fun on-scroll animations going on and an overview switch. The idea is to have a view switch which allows the layout (specifically the images) to change into a grid. The switch is made with the help of GreenSocks’ Flip plugin and we use Lenis for the smooth scrolling.

Our initial layout looks as follows:

While scrolling, a few things happen. The titles next to the images will be hidden and we also have a marquee that moves across the page.

Once we click on the switch, all images will animate to their position in the grid:

I hope you like this little layout and find it useful!

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!