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.

https://webflow.com/website/Scroll-Magic

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