I encountered a false warning when using GSAP in Vue3

[Sooooooooooooooooootheby]

When GSAP selects an externally imported component, the console display "Invalid property x set to 100 Missing plugin? Gsap.registerplugin () ", and GSAP animations will not work.

This is obviously a false warning, the real reason may be virtual DOM or something, I don't know, because, I am not a professional front-end engineer, this is just my guess.

I hope this can be fixed, if not, please modify the text description of the warning, because this is a big misunderstanding for front-end or GSAP beginners, it looks like I have all four limbs but I am told that I can't walk without arms or feet.

(Sorry, I don't know how to use online editor, no matter what URL embed I use,it will show 404)

https://stackblitz.com/edit/vue-b7i3vv?file=src%2FApp.vue

See the Pen App.vue by edit (@edit) on CodePen.

[Cassie]

Heya!

 

So you're trying to animate something that doesn't have the x property available. Hence the 'Invalid property x set to 100' warning. In your case this isn't a GSAP thing, you're just targeting the Vue component instance instead of an actual DOM node.

If you log out this.$refs.sideBar in the console, you can see it's just an object (the Vue component instance). To animate the actual HTML element with GSAP, you need access to the root DOM element, so you just need to add target this.$refs.sideBar.$el instead.

 

It's always useful to log stuff out to the console to see what you're trying to animate! 💚

https://stackblitz.com/edit/vue-ne4e3h?file=src%2FApp.vue

Hope this helps!

[Sooooooooooooooooootheby]

7 hours ago, Cassie said:

Heya!  嘿！

 

So you're trying to animate something that doesn't have the x property available. Hence the 'Invalid property x set to 100' warning. In your case this isn't a GSAP thing, you're just targeting the Vue component instance instead of an actual DOM node.
因此，您正在尝试为没有 x 属性的事物制作动画。因此，会出现“无效属性 x 设置为 100”警告。在你的情况下，这不是 GSAP 的事情，你只是针对 Vue 组件实例而不是实际的 DOM 节点。

If you log out this.$refs.sideBar in the console, you can see it's just an object (the Vue component instance). To animate the actual HTML element with GSAP, you need access to the root DOM element, so you just need to add target this.$refs.sideBar.$el instead.
如果你在控制台中注销 this.$refs.sideBar，你可以看到它只是一个对象（Vue 组件实例）。要使用 GSAP 对实际的 HTML 元素进行动画处理，您需要访问根 DOM 元素，因此您只需要添加目标 this.$refs.sideBar.$el。

 

It's always useful to log stuff out to the console to see what you're trying to animate! 💚
将内容注销到控制台以查看您正在尝试制作动画的内容总是很有用的！💚

https://stackblitz.com/edit/vue-ne4e3h?file=src%2FApp.vue

Hope this helps!  希望这有帮助！

This is just as I guessed, it is caused by the virtual DOM of Vue.

So I hope to modify the console's warning message, for example, change it to something like "GSAP cannot find the node," after all, the prompt about missing plugins is too misleading for beginners.

This should not be a difficult thing, right?

[GreenSock]

3 hours ago, Sooooooooooooooooootheby said:

This should not be a difficult thing, right?

It's not so much that it's "difficult"; it just isn't appropriate. Keep in mind that GSAP can literally animate ANYTHING that JavaScript can touch - it is not limited to DOM elements. So consider this scenario: 

let obj = {y: 100};

gsap.to(obj, {
  y: 500,
  x: 500 // <-- uh oh
});

GSAP would console.warn() about "x" not being a valid property of obj and ask if a plugin is missing (because often plugins add special capabilities that are mapped to certain properties). For example, motionPath or drawSVG. 

 

Your request is based on the assumption that GSAP would only animate DOM elements, but that isn't true. Without a bunch of extra code injected into the core that's Vue-specific (which would force everyone to pay a kb price for something that's only relevant to a subset of Vue users), it just isn't feasible for GSAP to know that the Vue object was supposed to be associated with a DOM element. To GSAP, it's just an object which of course GSAP has no problem animating. 

 

It's also important to understand that GSAP is intentionally framework-agnostic. It can be used for literally anything...Vue, React, Angular, vanilla, whatever. There's nothing in the core that's specific to a particular framework and we'd like to keep it that way because it's far more flexible and streamlined. 

 

Does that make sense? 

[Cassie]

This also isn't really caused by the virtual DOM. You're just not targeting the thing that you want to animate.

 

A Vue component instance isn't the same as the root element, it contains ALL the elements in that component. Whether you're using GSAP or writing any kind of JS logic that needs access to the HTML, it's up to you to dig into it and get the item you need.

This is good feedback though. I might put a page together in the docs that lists out the warnings and what people can do to trouble shoot!