ScrollTrigger pin didn't work when I disable markers, why?

[Dylekter]

Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why?

 PS: With markers it works

let tl2 = gsap.timeline();

tl2.from(".root--offer__header", {

    xPercent: 650,

});

 

ScrollTrigger.create({

    animation: tl2,

    trigger: ".root--offer__header",

    start: "top top",

    end: "+=4000",

    scrub: true,

    pin: true,

    anticipatePin: 1,

    duration: 2,

    ease: "none",

    markers: true,

});

[ZachSaucier]

Hey Dylekter and welcome to the GreenSock forums.

 

Almost always when this happens it means that your page doesn't have scrolling in it without the markers. In your ScrollTrigger code you can see that ScrollTrigger is adding 4000px of height to the page, which will make the page scroll in almost every situation. Since you have a scrub of true, the animation is controlled by the scroll position. But if there is no scrolling then there is no progressing through the animation. Does that make sense?

 

We'd be happy to point out how to fix this with code if you provide a minimal demo but you very well may be able to fix the issue yourself knowing this information  

[Dylekter]

I found solution, section was to short and i didnt have scroll space

[Apnw2]

Hello,

I have exactly the same problem but I'm wondering what is the solution. I'm trying to implement a horizontal scroll very similar to 

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

. It works fine when I put the markers but stop working when I remove it. If a CodePen seems useful I could try to provide it. In the demo there is height: 100vh; So where is the space necessary to scroll in there ?

Thanks to enlighten me.

[OSUblake]

Hi @Apnw2

 

It would be very helpful if you could provide a minimal demo that clearly shows the issue, and feel free to start a new topic in the forum.