How could I achieve this scroll effect?

Hi, I’m hoping for a general overview of how to create a scroll effect similar to PillPack:

When you scroll past the first section, it shows 3 med packs, then as you continue scrolling, it seems to switch through 3 slides, then continues with normal scrolling after that. How would I structure something like that?

Thanks,
Jason

Hi jasonferg,

You can achieve this with css-sticky and scroll animations https://webflow.com/feature/position-sticky.

Create a section,
then a 300vh div,
then another 100vh div that you set to sticky at 0% top,
In side that sticky div create 3 divs (one per slide), set them to absolute full
Then create a “page scrolled” interaction and set hide/show for each slide depending on scroll percentage.

1 Like

Yes, follow what @ColibriMedia said.
Or you can use this Clone project I made using ScrollMagic.
If you know any JQuery or are good at applying simple instructions then you can create this easy with ScrollMagic. It’s really awesome.

Thanks guys! I’ll give that a try. I’m not very strong on javascript, but I can follow instructions.