why my scroller-start and scroller-end are not stationary.

[Ayush3513]

I am trying to resolve this problem from 2 days but still its not working properly. when I scroll the scroller-start and scroller-end is also coming with the scrolling that's why my scrollTrigger is not working . I hope you will resolve my problem as soon as possible

See the Pen YzbPwjQ by Ayush-Chavda (@Ayush-Chavda) on CodePen.

[Rodrigo]

Hi @Ayush3513 and welcome to the GSAP Forums!

 

That's basically a CSS issue rather than a GSAP one. You're using the scroller config in ScrollTrigger, that basically tells ScrollTrigger to look for the scroll position in that element, by default ScrollTrigger will look for the scroll position in the main window element. Then  your main element doesn't have a fixed height so it stretches out to the height of it's children, because of that there  is no scroll inside that element. There are two options:

1. Use the default scroller in your ScrollTrigger configuration:

   gsap.to("#page2 #box2", {
     x: 400,
     y: 400,
     duration: 4,
     scrollTrigger: {
       trigger: "#page2 #box2",
       markers: true,
       scrub: 2
     }
   });

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

2. Give your main element a height of 100vh:

   .main {
     height: 100vh;
     overflow: auto;
   }

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

Hopefully this helps.

Happy Tweening!

[Ayush3513]

okey really really thank you for resolving my problem. I didn't choose second option because I wanted to use locomotive js on this ane if I wanted to apply locojs I can't give any height to the wrapper div. 

[Ayush3513]

Hii @Rodrigo i applied locomotiveJs(In locomotive js we have to make one wrapper div and we can not give height to it) to my project and scrollTrigger is giving me same problem, I can't give height to the wrapper div (main) so is there any other way to use scroller as main without giving it height .Hope you understood my problem

[Rodrigo]

Hi,

 

This is a bit beyond the scope of the help we provide in these free forums, since locomotive is not a GSAP product and we don't have the time resources to provide support for it, and the particular setup you have is a part of the problem as well (not being able to give an element a fixed height and overflow).

 

Here is a demo of Locomotive using ScrollTrigger:

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

 

Hopefully that helps.

Happy Tweening!