Connection problem with header when scrolling

[Oliver Boucher]

Hi, I'm making project with React and GSSP.

I want to make header effect that connect with scrolling.
This is my project with codesandbox.

https://codesandbox.io/p/devbox/cocky-ben-fgwh9p?file=%2Fsrc%2Futils%2FdataUtils.tsx%3A11%2C29

In my project I have got issue when click the navbar.

When I click the navbar link, the navbar animation replay.

[GSAP Helper]

We'd love to help, but I'm not quite sure what you're asking. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

[Rodrigo]

Hi,

 

On top of reiterating the need for a minimal demo (emphasis on the minimal part) is important to know exactly where to look. From a quick glance this seems more related to the logic you have in place for moving the indicator in the click event handler. Most likely you're creating a timeline and then adding new instances to that timeline on  each click and restarting again, that's why you're seeing previous parts of the animation playing again.

 

Please create a smaller demo that makes it easier for us to see the problem and tell us exactly where to look.

 

Happy Tweening!