ScrollTrigger only works correctly when console is open 🤔

[serotoninene 4 Likes (Newbie)]

Hi, everyone ! 

Sorry I don't have a codepen as I have no idea how to replicate my problem, but i have the actual website that's already live : https://alexandrepujol.com/

 

I have a scrollIndicator (on the bottom right of the homepage) that's suppose to disappear when I scroll all the way down:

    tl.to(lineRef.current, {
      y: 25,
      scaleY: 0,
      scrollTrigger: {
        startTrigger: "#Homepage",
        start: "top top",
        end: "bottom bottom", // correct end
        markers: true,
        scrub: true,
        onLeave: () => {
          setScrolling(false);
        },
        onEnterBack: () => {
          setScrolling(true);
        },
      },
    });

When I reach the bottom, it toggles my state, which triggers a small animation to make it disappear : 

   gsap.to(lettersRef.current, {
        yPercent: -100,
        stagger: 0.02,
        ease: Power3.easeOut,
      });

The animation is only triggered when the console is open, when it's not, it stops before triggering the animation : 

 

When I put the markers on, I see that the end trigger has move more or less 100vh below where it's supposed to be, when I put the console mode on, it comes back to were it should. 

Anyone has had that problem before ? I can't explain it ...

 

Thanks if you have any idea what it is and even if you don't  

Cheers

[OSUblake 18,451 Likes (Superhero)]

Hi serotininene,

 

That scroll animation looks the same to me whether the console is open or closed. What browser and OS are you seeing this on?

 

The only weird thing I noticed is that when that contact form at the bottom appears, it's changing the scroll position, probably because it's changing the height of the document, but I don't know if that is related to what you are seeing and you are properly handling that change like doing a ScrollTrigger refresh.

 

If you could try to make a demo that reproduces the issue, that would be really helpful because it's really to troubleshoot a live site, especially when can't interact with the code and make changes to it. You can use CodeSandbox if you need to use React.

 

[serotoninene 4 Likes (Newbie)]

I'm gonna try to make a sandbox but as said I have no clue how to replicate the problem but let me try it ! 

Small question do u see the scroll disappearing or stopping before it ? 

 

Thanks for the feedback  

[OSUblake 18,451 Likes (Superhero)]

This is what looks with the console closed.
https://gyazo.com/5753f1e3d634888f0dd743bab23d94ff

 

[serotoninene 4 Likes (Newbie)]

Actually sorry ! My bad, it's not the console that's responsible, it's just when you resize the window ... 

[OSUblake 18,451 Likes (Superhero)]

Can you check this version of ScrollTrigger to see if fixes your issue?

 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If you need to import it, just add that file to your project and import ScrollTrigger from it instead of gsap.

[serotoninene 4 Likes (Newbie)]

It works ! Thank you very much !