Jump to content


GSAP Timeline not playing Nuxt.js

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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!

Link to comment
Share on other sites

  • Solution

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
  }, scope);


Hopefully this helps.

Happy Tweening!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.