Jump to content
GreenSock

Dylekter

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

Go to solution Solved by ZachSaucier,

Recommended Posts

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,
});
Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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.

 

  • Like 1
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.
×