Jump to content
Search Community

ScrollTrigger start position shift randomly

titungdup test
Moderator Tag

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

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

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

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.
×
×
  • Create New...