I've failed to create a correct animation for an element for a negative x value in gsap.to()

[Francis Paul Musango]

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. 

See the Pen ExGXKqJ by Musango-Francis (@Musango-Francis) on CodePen

[Rodrigo]

Hi @Francis Paul Musango and welcome to the GreenSock forums!

 

Is really hard for us to do much without a minimal demo. We also have a collection of starter templates using GSAP and React here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Also when using GSAP in React environments, GSAP Context is the best friend you can have:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also check the resources in this page to better learn how to use GSAP in React apps:

 

Finally, despite not providing a minimal demo and due to the fact that your question was clear in terms of what you are trying to do and that achieving that is not extremely complicated I created this simple example:

See the Pen eYbWqwE by GreenSock (@GreenSock) on CodePen

 

In the future though, do your best to provide a minimal demo that clearly illustrates what you're trying to do and the problems you're facing.

 

Hopefully this helps.

Happy Tweening!

[Francis Paul Musango]

11 hours ago, Rodrigo said:

Hi @Francis Paul Musango and welcome to the GreenSock forums!

 

Is really hard for us to do much without a minimal demo. We also have a collection of starter templates using GSAP and React here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Also when using GSAP in React environments, GSAP Context is the best friend you can have:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also check the resources in this page to better learn how to use GSAP in React apps:

 

Finally, despite not providing a minimal demo and due to the fact that your question was clear in terms of what you are trying to do and that achieving that is not extremely complicated I created this simple example:

 

 

 

In the future though, do your best to provide a minimal demo that clearly illustrates what you're trying to do and the problems you're facing.

 

Hopefully this helps.

Happy Tweening!

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

[Rodrigo]

Hi,

 

The issue has to be in this calculation:

let activeTabPosition = activeTab.getBoundingClientRect().x;
let selectorPosition = selector.getBoundingClientRect().x;
let slideDistance = (activeTabPosition - selectorPosition)

You are getting the current active element and the target. When you go back to an element before that value is negative. Keep in mind that, regardless where an element is first rendered, it's transform X value is zero, so for example if you go to the first element, that value has to be zero if the indicator is in the same position.

 

Normally in this cases is better to add some console logs to your code in order to see what numbers you are getting from the calculations and see if they match with what you are expecting.

 

In the case of my example, the only calculation I make is to get the offset of the button child node, because I'm attaching the indicator to that element, but if you want the indicator to use the entire width, that wouldn't be necessary.

 

Hopefully this clear things up.

Happy Tweening!