How to create a scrollable chain of blocks?

[zahulk]

Hello everyone!

I need help implementing a scrolling chain for several blocks. I assumed that this could be done using the GSAP library. I tried different options, but I couldn't achieve the desired effect. The main problem is that GSAP continues to scroll the page in any case, which doesn't suit my needs.

Structure: There are two rows. Each contains two columns. There's an image on the left, and content on the right. The content in the right column is taller than the row height.

Logic: We scroll the page to the first row, the top of the row sticks to the edge of the browser. At this moment, the page scroll stops, and we start scrolling the content in the right column of the first row (which is stuck). When we reach the end of the content, we continue scrolling the page. At this point, the first row moves under the second one. When we reach the top of the second row, we stop the page scroll and repeat the logic of the first row, i.e., we scroll the content. When we reach the end, we continue scrolling the page as usual.

If we then scroll the page in the opposite direction, the entire logic should occur in reverse order.

The structure and minimal styles can be found here: https://jsfiddle.net/zahar_92/bjxuo8s6/34/

[mvaneijgen]

Hi @zahulk welcome to the forum!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

Quote

...moving things on the y-axis instead of scrolling them...

This is where currently your logic isn't working (or what is really hard to solve), my advise make everything work without ever touching the scrollbar, animate everything on the y-axis and then when you're fully done with the animation add it to ScrollTrigger and the effect will 100% work! 

 

Here a quick demo with just 3 tweens which already gets you 80% there 

 

See the Pen RNRdaPL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Perhaps this demo can help you getting started:

See the Pen xxmpQwP by GreenSock (@GreenSock) on CodePen.

 

The idea is to basically pin the entire section that contains both columns and if the text content is taller than it's container move it on the Y axis.

 

If your sections' height is less than the viewport height you can resort to this demo to correctly pin each section:

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[zahulk]

Thank you for your time and your answers! There's one thing I can't figure out. In the proposed solutions, the main scrollbar of the browser is moved. That is, the page is actually lowered, if I understood correctly. And I need to fix the first section first and scroll through the content inside it without scrolling the page itself, then do the same with the second section. And only then return scroll control back to the browser. I have content before and after these sections. It always happens to me that while I scroll through the content inside the section, I lower the entire page at the same time.
I probably don't fully understand the concept. Please explain in a little more detail.

[mvaneijgen]

I'm not fully sure what you're asking, but at a certain point the animation takes over, the page is still scrolling, except ScrollTrigger has pinned the element you want to pin and is playing the animation tied to the scrollbar.

 

Most people fix the issue of the page still scrolling underneath by setting the section to a 100vh, which lets you focus on the current section and don't have to deal with visual clutter of other sections taking up space, but you can off course still have this but then you need to wrap all the sections you want to have also pin in an element and use that as the pin container. 

 

If you still have questions please post a new minimal demo with what you've tried already, then we can take a look at your code action and better help you.

 

Hope it helps and happy tweening! 

 

[zahulk]

Thanks for the help. The issue was solved by slightly changing the layout and the scrolling logic itself. I decided to make these sections 100vh. This greatly simplifies the logic and solved everything using standard ScrollTrigger tools.