Jump to content
Search Community

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

Ayush3513 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites



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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...