Using GSAP with VueJS 3 Composition API

[hades]

Hello everyone,

 

I am having some trouble getting GSAP to work with Vue and the Composition API. halp? Screenshots attached for reference. I've looked around and couldn't really find anything similar.

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Keep in mind that the setup method in the composition API runs before the component instance is created and it's purpose is to store the component's reactive data. In your particular case title is just a reference to a reactive data, nothing more. Is not a DOM node that GSAP can actually tween in the App. What you could do is create a reference that later in the component's lifecycle, can hold a GSAP instance, but it seems overkill IMHO.

 

The recommendation for using GSAP with Vue is to attach a GSAP instance to the component's instance in the mounted hook and use refs in the template to identify the DOM node you want to use, like this:

<template>
  <div ref="myElement" />
</template>

Then in the script tag:

import { gsap } from "gsap";

export default {
  mounted () {
    this.myTween = gsap.to(this.$refs.myElement, { /* GSAP Config Here */ });
  }
}

Keep in mind that the main purpose of the composition API is to avoid giant monolithic reactive setups in large applications, or smaller ones that need a scalable flexibility, but it shouldn't be a place to define your GSAP instances.

 

Happy Tweening!!!

[hades]

Makes perfect sense. Thank you!