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.

 

[manuki]

Hello, im having the same issue with this animation. I cant set the markers to false or hide the markers because the animation stops working. How can i fix?

Here is an example https://www.anderson.ucla.edu/lib/email/JWGLA/2024/web/index-manu.html

 

Thanks

[Rodrigo]

Hi @manuki and welcome to the GSAP Forums!

 

There is not a lot we can do on a live site, unfortunately.

 

It'd be super helpful if you could create a minimal demo that clearly illustrates the problem you're having. There is no need to create a copy of your whole project, just a few colored divs that show the issue at hand.

 

Happy Tweening!

[GreenSock]

Yeah, my best guess is that you set up your CSS/markup so that the page doesn't actually have the height to get to the scroll positions you're setting, so when you enable markers those actually stretch the page tall enough to where you can reach them. In other words, imagine your page is natively 100vh tall (no scrolling available) and then you set up a ScrollTrigger with a start: 2000 (starts 2000px from the top). Without markers enabled, you'd never be able to get to that start position. But if you enable markers, you'd suddenly have a marker that's injected into the DOM at 2000px, thus you'd now be able to scroll to that spot. 

 

Good luck!

[manuki]

1 hour ago, GreenSock said:

Yeah, my best guess is that you set up your CSS/markup so that the page doesn't actually have the height to get to the scroll positions you're setting, so when you enable markers those actually stretch the page tall enough to where you can reach them. In other words, imagine your page is natively 100vh tall (no scrolling available) and then you set up a ScrollTrigger with a start: 2000 (starts 2000px from the top). Without markers enabled, you'd never be able to get to that start position. But if you enable markers, you'd suddenly have a marker that's injected into the DOM at 2000px, thus you'd now be able to scroll to that spot. 

 

Good luck!

Thank you, i think i get it. Im new to gsap and not well versed in js, so its hard to understand what i need to do apart from setting my body to be tall like 7000px or something like that right?

Love the versatility gsap has, hope to get to use it more. Thanks

[GreenSock]

Yeah, if you need some help @manuki please make sure you provide a minimal demo, like a CodePen or Stackblitz that clearly shows the issue. A live site is just too cumbersome to try to troubleshoot and tweak things. 

 

Good luck! 👍

[manuki]

Hi, sorry for not providing a minimal demo, im not sure how to do it for the issue im having, which is chrome not playing the full animation. It stops mid-way. on Mac Safari, it plays till the end, but not no chrome... Any known issues or recommendations?

[GreenSock]

1 hour ago, manuki said:

Hi, sorry for not providing a minimal demo, im not sure how to do it for the issue im having, which is chrome not playing the full animation. It stops mid-way. on Mac Safari, it plays till the end, but not no chrome... Any known issues or recommendations?

Sorry, we simply cannot troubleshoot this blind. If you want help, you MUST find a way to show us with a minimal demo. If you can consistently get it to break in your environment, then you should create a CodePen that's just a minimal version of that...and if it works, then start changing it to be closer and closer to the "real" project (not as minimal). At some point, it'll break and you'll know exactly what you changed to make it break and you can post here. 

 

This doesn't sound like anything related to GSAP, honestly. I could be wrong, of course. But GSAP is quite consistent across browsers. I'm very curious to see a minimal demo so we can inspect what's going on. 

[manuki]

Ok i think i got it.

See the Pen jOdjpNo by manuki76 (@manuki76) on CodePen

Here's the pen, on this version is not working properly like on the link, maybe we are setting things wrong, so any input is welcomed. Thanks

[Rodrigo]

Hi,

 

There isn't a ScrollTrigger instance with pinning in your demo, the only one could be this:

var tl_intro = gsap.timeline({
  scrollTrigger: {
    trigger: ".anim-tl",
    start: "bottom bottom",
    end: '4rem center',
    scrub: true,
    toggleActions: "play complete reverse reverse",
    invalidateOnRefresh: true,
    anticipatePin: 1
  }
});

But even if you have anticipatePin on the config there is no pin: true/element/selector in the config.

 

Please provide a minimal demo (no need to add all that HTML/CSS/JS just a few colored divs) that clearly shows the problem you're having.

 

Happy Tweening!

[GreenSock]

Yeah, that isn't exactly a minimal demo, and there are quite a few basic problems with it like pasting HTML tags into the JavaScript panel, links to missing JS files, missing dependencies like jQuery, using SUPER old version of GSAP, etc. It'll definitely increase your chances of getting a good answer if you provide a minimal demo and also explain precisely what you mean by "...is not working properly". 

 

By the way, this looks very odd to me: 

start: () => `${(headings.length) * window.innerHeight - 500} top`,
end: () => `top top`,

That would make it end BEFORE it starts

 

Here's a fork of your demo that fixes a few of the very basic things, but I really don't know what isn't working the way you'd expect so you'll have to take it from here and fill in the details and hopefully make it a much more minimal demo: 

See the Pen RwvzBoJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[manuki]

27 minutes ago, GreenSock said:

Yeah, that isn't exactly a minimal demo, and there are quite a few basic problems with it like pasting HTML tags into the JavaScript panel, links to missing JS files, missing dependencies like jQuery, using SUPER old version of GSAP, etc. It'll definitely increase your chances of getting a good answer if you provide a minimal demo and also explain precisely what you mean by "...is not working properly". 

 

By the way, this looks very odd to me: 

start: () => `${(headings.length) * window.innerHeight - 500} top`,
end: () => `top top`,

That would make it start BEFORE it ends

 

Here's a fork of your demo that fixes a few of the very basic things, but I really don't know what isn't working the way you'd expect so you'll have to take it from here and fill in the details and hopefully make it a much more minimal demo: 

 

 

What i meant, is that its not consistent. The behavior. It scrolls through the first 5 facts, then blurs and then text animates from right, then it animates to end screen. This flow works sometimes, and sometimes it gets like stuck. and doesnt go further than the 5 first facts. But from your fork, it seems to have fixed that.

As for the js versions, i used a demo from gsap, so those were the files referenced, i didnt know there were new ones. I would like to use the latest ones.

Thank you

[manuki]

19 minutes ago, manuki said:

What i meant, is that its not consistent. The behavior. It scrolls through the first 5 facts, then blurs and then text animates from right, then it animates to end screen. This flow works sometimes, and sometimes it gets like stuck. and doesnt go further than the 5 first facts. But from your fork, it seems to have fixed that.

As for the js versions, i used a demo from gsap, so those were the files referenced, i didnt know there were new ones. I would like to use the latest ones.

Thank you

Thank you so much for this fork, its working perfectly!!! now i can work on css!! Thank you

[Rodrigo]

49 minutes ago, manuki said:

I would like to use the latest ones.

You can get them from here:

https://cdnjs.com/libraries/gsap

 

Also you can take a look at our installation page to find out more:

https://gsap.com/docs/v3/Installation

 

Happy Tweening!