Smooth Panel Scroll Effects

An exploration of smooth panel scroll effects based on Margot Priolet’s website.

By Manoela Ilic in Playground on
Demo Code

If you have browsed through our latest website roundup you might have seen the amazing website of Margot Priolet. I absolutely love the hero section effect when scrolling and I wanted to remake it and explore some variations including playing with transforms and filter effects.

So the initial view is a hero section like this:

When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations.

After scrolling for a bit and triggering the effects on the images, we reach the final section.

This is how it all comes together:

This demo shows how to play with smaller images and the black and white filter.

Hope you enjoy this and find it useful!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

gsap scroll

Stack to Content Layout Transition

Players Club: A Free Astro Template for Showcasing Music Artists

The process of building a CSS Framework

The Process of Building a CSS Framework

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.