scrolltrigger Display issue with sticky elements in conjunction with right-side scrolling

[lzyoo]

Hi GSAP Community,
I am currently facing an irresolvable issue with GSAP, which leads me to believe my approach is fundamentally flawed. The specific problem lies in the implementation of horizontal scrolling within my section2 element. When I attempt to pin this section to prevent its exit from the viewport, it causes the subsequent elements below to manifest prematurely. My objective is to have the viewport's scroll locked upon entering section2, thereby enabling a horizontal scroll through its internal elements. Once this internal scroll sequence is complete, the viewport's vertical scroll should resume, allowing the subsequent sections to enter the view in their natural order.
Thanks in advance!

See the Pen PwZgraZ by lppoi (@lppoi) on CodePen.

[mvaneijgen]

Hi @lzyoo welcome to the forum!

 

When working with ScrollTrigger you should have it handle all pinning, so you should not use position: sticky; but in your ScrollTrigger which needs to be sticky set pin: true, this way ScrollTrigger knows what needs to stick and adjust all the calculation based on that. 

 

You should also really pay close attention to adding transitions (see transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 1); in your .layer class) to elements that GSAP is animation, please read https://gsap.com/resources/mistakes/#using-css-transitions-and-gsap-on-the-same-properties

 

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:

 

 

If you can you should stay away from animating top, left, right, bottom and use the transform properties instead y and x, these are much better for performance!

 

I've changed your CSS a bit and have all cards start at the same position and then move them .from() off screen to on screen. I've also disabled ScrollTrigger as mentioned above to really focus on the animation at first and take it one step at a time. I think my topic above would really help you understand the logic and how to set everything up. 

 

See the Pen emJoqdb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

If you still need help after this be sure to post back here, show us what you've tried and someone here will surely point you in the right direction.

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

On top of @mvaneijgen's great advice, perhaps these demos can help:

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

 

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

 

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

 

Happy Tweening!