Jump to content
GreenSock

serotoninene

ScrollTrigger only works correctly when console is open 🤔

Recommended Posts

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

image.png.a08741c55266704341e2393c0b5f274c.png

 

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.
×