Home » vue » Invalid property … set to … Missing plugin? gsap.registerPlugin()

Invalid property … set to … Missing plugin? gsap.registerPlugin()

Posted by: admin November 26, 2021 Leave a comment

Questions:

In Vue3, if I try a gsap animation in the mounted() lifecycle hook, it works, but if I try it in the onMounted hook inside setup, I get these warnings:

Invalid property rotationY set to 45 Missing plugin? gsap.registerPlugin()
Invalid property rotationX set to 45 Missing plugin? gsap.registerPlugin()

My setup:

setup() {
    const comments = ref(null);
    const test = function() {
        gsap.fromTo(
            comments,
            { rotationY: 45 },
            {
                rotationX: 45,
                ease: 'back.in(1)',
            },
            'mousein'
        );
    };

    onMounted(test);

    return { comments };
},

The Vue docs say onMounted inside setup is the same as mounted(), so how could I be getting different results?

Answers:

Since comments is a ref, you have to use its value prop to access the template ref:

const test = function() {
    gsap.fromTo(
        // BEFORE:
        // comments,

        // AFTER:
        comments.value,

        /*...*/
    );
};