Tabs - 'watch-like' animation and dynamic font-size

I’m trying to create a sort of ‘watch’ effect to my tabs / navbar. This would involve 1) dynamically changing the font-size by about -10% per tab away from current, and 2) include some sort of transition animation to ease the font-size change and give it a sort of ‘shift’ effect. Here is my fiddle where I tried to play around with javascript in order to make the effect work to my liking.

The issue is bringing this into webflow. When I added the custom code and published (changing some of the querySelectors to match webflow’s css), the animation is kind of choppy and not uniform. I’m wondering if it has anything to do with the internal styling of the tabs (such as padding or positioning). Either way, is this effect possible in webflow at all?? I’m open to removing my custom code altogether and instead utilizing their animation features, but when I tried it myself I couldn’t see any options for the dynamic font-sizing that I’m trying to attain.