1
I am implementing an animation with GSAP in my project, when I use the ref in a common html tag works from good Ex:
<div ref="element"></div>
But when I do this on a Vuejs component it doesn’t work as expected Ex:
<MyComponent ref="element" />
When I give a console.log in this ref in the method used the return is different for these two cases!
move(e) {
const { element} = this.$refs;
console.log(defaultAnimation);
TweenLite.to(element, 0.2, {
x: -((e.clientX - window.innerWidth / 2) / 50),
y: -((e.clientY - window.innerHeight / 2) / 50)
});
}
In the first case the console.log returns <div ref="element"></div> an Object is returned in the second VueComponent!
I wonder if when is a component I have to reference differently so that GSAP can find this reference? Thank you!
To documentation specifies "If used on a Plain DOM element, the Reference will be that element; if used on a Child Component, the Reference will be Component instance". That is, "If used in a DOM element, the reference will be that element; if used in a component, the reference will be the component instance". After all your code behaves as expected :D
– fernandosavio
Mmm, I understood more or less.. what happens is that in the case of the component and effect does not happen in the expected way..
– wDrik
Just that you test, if it’s element is OK, if it’s component take the component element...
– fernandosavio