GSAP Timeline not playing Nuxt.js

[CptRobby]

Hello, could you please help me. I'm trying to attach tweens to timeline in Nuxtjs like that: tl.value = gsap.timeline({..}); and tl.value.to({...}); but animation not playng, but onStart event fires and tl.value.duration() returns 1. But if I use chain like tl.value = gsap.timeline({..}).to({..}) it's works fine. Here is simple example: https://codesandbox.io/p/sandbox/mystifying-waterfall-i2cwtp?file=%2Fpages%2Findex.vue%3A1%2C1 . Thank you!

[Rodrigo]

Hi @CptRobby and welcome to the GreenSock forums!

 

This seems to be related to some stuff Vue does to refs that is a bit longer to explain here. But is definitely not a GSAP issue.

 

If possible don't store your GSAP timeline in a ref, since that particular element becomes reactive as well, so if nothing in your app depends on that ref being updated, there is no actual need to store the GSAP Timeline in a ref, just create a variable and update that variable inside the GSAP Context instance:

const block = ref();
const button = ref();
let tl;
let ctx;

onMounted(() => {
  ctx = gsap.context(() => {
    tl = gsap.timeline();
    tl.to(button.value, {
      opacity: 1,
      duration: 1,
    });
  }, block.value);
});

Finally is not a good idea to make paused: true a default in your Timeline configuration, since every single instance you add will be paused and you'd have to change that as you create them. Is better to just make the timeline paused:

let ctx;
let tl;

onMounted(() => {
  ctx = gsap.context(() => {
    tl = gsap.timeline({
      paused: true,
    });
    tl.to(el, { /*...*/ });
    
    // Later in your code or in a method
    tl.play();
  }, scope);
});

 

Hopefully this helps.

Happy Tweening!

[CptRobby]

@Rodrigo thank you for your help!