ScrollTrigger Vertical products gallery

[Maria Ferraro]

Hi! I'm trying to create something like a vertical gallery to show different products but one at a time on scroll.

The main idea is to show One product and with the scroll it has to go up to show the other and stay there until the next scroll to show the next product. 

 

Not sure what I'm doing wrong or what I'm missing (I'm new with Gsap)

See the Pen gOjLEdx by mariaferraro (@mariaferraro) on CodePen

[GreenSock]

Hi @Maria Ferraro! Welcome to GSAP. You'll like it around here.

 

It sounds like the behavior you want isn't actually scrolling - you just want to trigger an animation based on some kind of scroll-like behavior by the user (mouse wheel flick, touch-scroll, etc.). If it was native scroll, that'd mean that users could just grab the scrollbar and drag all the way down the page and everything would animate and jump to the right spot, but my guess is that you don't want that. So Observer plugin might be a perfect fit for you. Here's a demo from the docs page: 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Have fun!