ScrollToPlugin for RTL Tab Navigation

[Sovai]

Hello GSAP Community,

 

I am working on a Vue 3 project and facing an issue with implementing RTL support for a tab navigation system where the active tab should center on click. My current implementation with GSAP's ScrollToPlugin works fine for LTR, but fails in RTL mode.
Tabs are dynamically generated and centered using scrollTo from GSAP when clicked.

Current Issue:
Adding dir="rtl" to my scroll container breaks the centered alignment of the tabs. The function calculating the scroll position seems to not accommodate RTL.

 

I tried to not use RTL direction and reverse sort the data + unshift when add new items but its a lot of works and introduce more bugs so if i can get help to fix RTL instead it will be the best choice.

 

Thanks for your help

See the Pen bGyGdpb by sovai (@sovai) on CodePen

[Sovai]

Also any suggest for a better way to make content scroll to center without hard code to add blank items before and after?

[Sovai]

Hi @GSAP Helper @GreenSock Could you please take a look when you have a moment? Any pointers or guidance would be greatly appreciated!

[Rodrigo]

Hi and sorry for the delay answer, this one slipped through the cracks 🙏

 

The issue here is mostly about the calculations and the use of absolute values. I made a few changes in your setup, removed some elements you were using to center the list and used relative values to translate the element that contains the tabs instead of using scrolling and it seems to work the way you intend:

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

 

Hopefully this helps.

Happy Tweening!

[Sovai]

Hi @Rodrigo, that's awesome! I just need to add arrow width for calculation to make the arrow center. 

 

const calculateCenteredScroll = (element) => {
  try {
    const elementRect = element.getBoundingClientRect();
    const containerRect = scrollContainer.value.getBoundingClientRect();
    const arrowWidth = 12;
    return (
      (containerRect.width - elementRect.width + arrowWidth) / 2 - elementRect.x
    );
  } catch (error) {
    console.log("error: ", error);
  }
};

 

Cheer!