miwal

I found that vue does have a way to access the dom directly, via a $refs property on the vue instance. You can set these in your vue templates, which are comparable to ids but are not in the actual rendered dom. They give you back, inside of vue, a reference to the actual dom element. That can achieve what seems needed here, letting TweenLite do its stuff, and avoiding inconvenience of verbose manual dom navigation or setting a ton of ids. I'm going to explore that pattern and my question still stands in the general area of good patterns via which these libraries can work together, perhaps specifically in the context of svgs. Thanks for your interest.

I'm learning both vue.js and greensock and looking to understand how to use these two wonderful tools in tandem. The position: as I understand it, the point of using vue.js is that you don't need to manually update the dom. Instead, you bind data properties and vue then handles dom updates for you. All you do is change the data property. I have explored using TweenLite and passing in as the first argument something from the reactive data properties of a vue component, e.g. <template> <svg width="20rem" height="20rem" viewBox="0 0 100 100"> <rect :x="rect1.x" :y="rect1.y" :width="rect1.w" :height="rect1.h" :fill="rect1.f" /> <circle id="circle1" class="fill-dark-blue" cx="60" cy="60" r="10" /> </svg> </template> <script> export default { data() { return { // below are not dom elements, but are bound to dom elements by vue rect1: { x: 14.696, y: 13.414, w: 47.574, h: 30.602, f: '#ebebeb' }, // ... }, }, // } // e.g. in mounted(): TweenLite.to(this.rect1, 1.0, { w: 10, h: 50, f: '#ffd700', ease:Power4.easeOut }); What this is doing is tweening the data property which vue then reactively updates each time the data property is changed by TweenLite. i.e. we're tweening a vue data property, which is then reactively updated on each change. It all works fine, which is very cool. However, I cannot use, e.g. { className: 'light-yellow' } in the TweenLite vars, the reason being that to accomplish that animation, gsap will attempt to do it by first sniffing the css properties, then adding a style tag (as seen in action on the excellent intro to greensock short video on this site). That does not work because (my guess) the selector passed to gsap is not actually a dom selector but the vue data property. Hence, gsap doesn't seem to be able to get the dom hook so can't apply the style tag. At least, that's my diagnosis of why it is not working. In contrast, I can get the className animation working by doing this: TweenLite.to('#circle1', 1.0, { className: 'fill-light-blue' }); What the above is doing is going into the dom directly via an id tag and so bypassing vue's data binding. The problem is that in this case, if I have a complex svg, I can no longer benefit from vue's ability to bind into anywhere in the dom simply by updating a data property. I'll have to get into dom navigation. This seems wrong. What does all this mean? Does it mean quite simply that if I want to tween vue data properties (for the benefit of not having to navigate the dom) that the feature set I am going to have available to me from gsap is going to be necessarily limited? I'm not entirely sure at this point how much of TweenLite & Max's power is going to be curtailed by this pattern, as I'm still learning. At this point I really want to grab a couple of good patterns for vue & gsap and get plenty of practice. Just need to settle on a limited set of patterns to practice with. The goal I have in mind here is, say, making a fairly complex svg and animating its component parts with greensock, via vue. Am I doing this right ? Thank you very much for discussion.