Jump to content
GreenSock

titungdup

ScrollTrigger start position shift randomly

Recommended Posts

I am having a very weird issue with scrolltrigger. I am shifting the navbar logo using scrollTrigger. Initially it start from top where the navbar is but as i scroll through the page the trigger start position shift mid way to the page and the animation starts again which was only supposed to happen when i have scrolled towards the navbar position.

 

This is the effect i am using. Is there any issue with this code? Let me know if there is any issue with this code and if necessary i'll also try to recreate the issue on codesandbox but i am not sure if i'll be able to recreate it. I know this is very vague question, let me know if i need to explain more.

 

It happens especially on iPad, less frequent on desktop(chrome).

useEffect(() => {
    ScrollTrigger.saveStyles(refMenu.current)
    ScrollTrigger.matchMedia({
      '(min-width: 768px)': function () {
        gsap.fromTo(
          refMenu.current,
          { y: '120px' },
          {
            y: '0',
            scrollTrigger: {
              trigger: refMenu.current,
              start: 'top top+=126px',
              end: 'bottom ',
              scrub: true,
              markers: true,
              id: 'nav-scroll',
            },
          }
        )
      },
    })
  }, [])

Thanks.

Link to comment
Share on other sites

it looks like the thing you are animating is also your trigger. if your trigger is moving around it is going to cause problems for ScrollTrigger's calculations. You should use something else as your trigger. perhaps create a parent element that wraps your trigger.

  • Like 1
Link to comment
Share on other sites

Hi Carl, that was also my initial assumption but i am using navbar container as a trigger which is fixed at the top and i am sure it is not moving. I also tried using different trigger but the issue was still there.

 

I am wondering if this code,ScrollTrigger.saveStyles(refMenu.current),is causing the issue. Is that supposed to be inside the useEffect hook? 

Link to comment
Share on other sites

sorry I don't know what "navbar container" is but your code shows your trigger is the same thing that is being animated .

perhaps if you post a demo we'll be able to provide more accurate help.

 

same.png.ddb968743d35e0796a4f6f5947e18ff9.png

 

 

 

  • Like 1
Link to comment
Share on other sites

I changed the code but it's still not working.

useEffect(() => {
    ScrollTrigger.saveStyles(refMenu.current)
    ScrollTrigger.matchMedia({
      '(min-width: 768px)': function () {
        gsap.fromTo(
          refMenu.current.querySelector('.brand-logo'),
          { y: '120px' },
          {
            y: '0',
            scrollTrigger: {
              trigger: refMenu.current,
              start: 'top+=126px top+=126px',
              end: 'bottom+=126px ',
              scrub: true,
              markers: true,
              id: 'nav-scroll',
            },
          }
        )
      },
    })
  }, [])

I have some screenshots, not sure if these helps.

2088103204_ImagefromiOS(2).thumb.jpg.71ce797650878fced79f34493998b731.jpg2096726301_ImagefromiOS.thumb.jpg.07b1a20b9e4617b0f4d0e4932eba1d2b.jpg1042604112_ImagefromiOS(1)(1).thumb.jpg.f4483261c633c5c83685c27b5e11efc5.jpg

 

If you have any hints what might be the issue, let me know i'll explore more into it. Sorry if these are not that helpful.

Link to comment
Share on other sites

unfortunately the images don't really help.

Just make a very simple demo, none of the real artwork, just some colored divs that represent your layout.

If you can replicate the issue without React even better, but here is a starter CodeSandbox demo for you

https://codesandbox.io/s/ut42t

 

 

Link to comment
Share on other sites

Thanks for your feedback Carl. I'll see if i can create a demo for this. Meanwhile i'll disable the animation for now.

 

Also i ran into some issue. I hope its okay to ask them here.

 

I have a scrollTriggered dark theme switcher applied on the homepage but it is not required on other pages. But when i change route to other page i am still seeing that scroll triggered theme switch even though that component is not loaded in other pages.  I tried ScrollTrigger.kill() but it just killed all scroll trigger animation. Also read some forum post that suggested to clear or pause the scroll trigger but it's not working. I just need to disable the animation on inner pages and again load the animation when switching to homepage. Any suggestion on this?

Link to comment
Share on other sites

1 hour ago, titungdup said:

I just need to disable the animation on inner pages and again load the animation when switching to homepage. Any suggestion on this?

 

It's very hard to advice without a minimal demo. The simpler it is, the better. 😁

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