PetrEDM

That's a good catch! It is indeed failing only with attributes (attr plugin). Css works as expected in all cases AFAICT. On my way of stripping the example code to a bare minimum, I also found out that it depends on how/what is included from GSAP. When included like this, the issue comes up: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> When included this way, all works as expected without further changes: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/AttrPlugin.min.js"></script> Related pen: https://codepen.io/petredm/pen/xvpmyx

Hey, thanks for the replies (and for GSAP itself too!) Yep, sure, Vue, agree on everything, it was a sort of minimal example replicating the issue and unfortunately seems to steered the original question I was just wondering if maybe anyone had any insight from GSAP's side of things, what interaction might be happening between the Tween and the Timeline since separated (by time or code) there are no issues observed with no changes in the Vue-related code that fails once the events are happening concurrently. (Only when the Tween is running it somehow interacts with the assignment of the Timeline object, as the codepen shows, otherwise no issues observed) I'll likely look into the issue further just for the fun of it, but the workaround of assigning a placeholder "new TimelineMax()" to the Vue's data at start and then replacing it with the real deal is working without any issues for my case, and at worst, I won't be using Vue's data for these objects, no problem. This is likely also a good clue to start the investigation I guess! Thanks again, will update you if I find out anything!

Hello, I came around a strange behavior when integrating GSAP/Timeline with VueJS. Needed to grab a reference to the timeline to be able to reverse play it later (and shallow watch for changes), used Vue's data to store the instance. This of course makes Vue add the reactivity to the object. It was working without any issues, now I found this strange behaviour. Not sure if it's some kind of obscure issue (with GSAP or VueJS) or it's just that generally GSAP objects (instances) shouldn't be added to Vue's data object? The codepen shows the issue (and "workarounds"), in short, adding a new TimelineMax to Vue's data while a Tween is progressing makes a TimelineMax.fromTo behave something like a "to" only (startAt value is used for the final state). The same setup when the TimelineMax object is first assigned to Vue's data before or after the Tween makes everything work as expected. I sort of worked around the issue for now, wondering though where the core issue is? Thanks! Petr