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.

Here’s the link to reproduce: https://codepen.io/sovai/pen/bGyGdpb

Thanks for your help