Francis Paul Musango

Thank you for your help and I'll be certain to implement what you have suggested. However, I intended to create a codepen for demoing the problem I was facing at the time of posting but codepen on my end wasn't working and I couldn't log into the site so I decided to post the issue and try creating the pen today, which I have done and attached to the issue. Though you've offered the solution to the issue I still do not understand why the logic I had implemented didn't work, could you look into it and perhaps you can pick out the error

Forgive my inability to make a better description of my problem in the title, I'm hoping to make up for it in the code. I am trying to make a simple animation slider for a tabs component in React, it's just a straightforward tab with buttons, and when a button is selected, hence made active in the state, a small div goes under it to mark the active tab, seems straight forward right. My approach was since the selector (I named small div marking the active tab selector and will be using it henceforth) was moving only along the x-plane and would move below the button components for the tabs, I could just get the x-coordinate of the activeTab button and the current x-coordinate of the selector, get the difference between the two and pass that difference as thex value in the gsap.to() function, useEffect(() => { if (activeTabRef.current) { let activeTabPosition = activeTabRef.current.getBoundingClientRect().x; let selectorPosition = selectorRef.current.getBoundingClientRect().x; let slideDistance = (activeTabPosition - selectorPosition) gsap.to(selectorRef.current, { x: slideDistance, rotation: 0, yoyo: false, ease: 'sine.inOut', duration: 0.5, }); } }, [activeTab]); This works as expected when sliding to a tab button that is in front (positive direction of the selector on the x-plane) of the selector, however when sliding to a tab button behind the selector, the slideDistance would be negative, and according to what I expected, the selector would animate through that distance in the negative direction of the x-plane, however it moves through a distance larger than the calculated x-coordinate difference between the activeTab and selector. I do not understand why and I would have posted this in stack exchange but I thought the best place would be here.