ScrollTrigger on whole page doesn't work without markers

[Men At Code]

Hello,

I've applied ScrollTrigger to the whole page, in order to achieve a smooth effect. 

When I remove markers or set them to false, the page stays fixed on first viewport and doesn't scroll; while with markers active (true) it works perfectly. 

I was wondering if there's some setting that i'm missing or some problems in the configuration. 

This is how i initialized it:

 

gsap.to('.container', {
      y: () => -(this.scrollService.height - document.documentElement.clientHeight),
      ease: "none",
      scrollTrigger: {
        id: "scrollTrigger",
        start: "top top",
        end: document.querySelector(".container").clientHeight,
        scrub: 1,
        invalidateOnRefresh: true,
        refreshPriority: 1,
        markers: true
      }
    });

as soon as i set markers false, it breaks. 

If anyone knows what's wrong, it'd be great, cause i've done some research but can't figure out why markers need to be active.

Thank you very much

[ZachSaucier]

Hey Federica. It's pretty hard to say what the issue is without seeing a minimal demo as the issue very well might relate to your CSS. Would you mind making one?

 

Additionally, have you seen the .scrollerProxy() method? It's likely more helpful for creating a smooth scroll effect. 

[GreenSock]

It definitely sounds like the problem is that you've got your page set up WITHOUT ANY SCROLL. ScrollTrigger doesn't add extra scroll or anything for you (well, unless you do pinning). I imagine you just need to tweak your CSS so that your page is set up to have some scroll. Adding markers obviously would place them down below the viewport, thus making it scrollable. That's probably why it's working only when you have markers: true. Sounds like some simple issues with your CSS/setup. Like maybe something like body { height: 200vh; }

[Men At Code]

Hey @GreenSock @ZachSaucier, thank you for your answer!

The problem was exactly what Jack explained, the height of the body was missing and, as a consequence, nothing scrolled. 

I've added in the calculations of the scroll that setting and now it works perfectly. 🤟