Jump to content
Search Community

GSAP timeline reference in Vue

BrianT test
Moderator Tag

Go to solution Solved by nico fonseca,

Recommended Posts

Hello,

I am having trouble referencing my GSAP timeline using Vue 3 composition API.

 

I am having no problem running the timeline when the component is mounted as follows.137734561_ScreenShot2021-08-10at7_09_43PM.thumb.png.537e373b9c7260cb886eaea3a5939a40.png

 

I am trying to store this timeline in a variable so I can use different methods such as play(), pause(), reverse(), etc. But am having problems getting that to work.

 

353872573_ScreenShot2021-08-10at7_18_13PM.thumb.png.d6ed45c698e69e9903f24aca46cd1ccd.png

 

When I run this code the animation does not work.

867710009_ScreenShot2021-08-10at7_26_32PM.thumb.png.678572966df43bb32d706f83f4693336.png

 

 

I know this might be more of a Vue related question than a GSAP one but I'm really hoping there's someone here who can help me out with this.

 

Thank you,

-Brian

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Hi BrianT!

 

I don't know Vue 3 that well, but I'll look into it if you can put something up on CodeSandbox. Here's a starter template for you.

https://codesandbox.io/s/gsap-vue-3-starter-p46tu?file=/src/main.js

 

Thank you for the response OSUblake!

 

Basically all I'm trying to do is to define an animation timeline and store it in a variable so I can use timeline/tween methods like play, pause, restart, etc on the timeline animation. 

 

I added a bit to the code sandbox you linked. I hope what I'm trying to do is clear/makes sense. It seems like it should be very doable but for whatever reason I can't seem to figure it out.

 

https://codesandbox.io/s/distracted-swirles-8l77p?file=/src/views/Home.vue

Link to comment
Share on other sites

I've used Vue.js and GSAP often in Vue 2, not 3, but I know that you needed to crate the timeline in the `created` lifecycle, which is now just build in to `setup()` (i think?)

 

I've uncommented your `onMounted` hook and split off the creation of the timeline, which makes is as far as I can see working 

 

https://codesandbox.io/s/headless-bird-8zc4z?file=/src/views/Home.vue

  • Like 5
  • 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.
×
×
  • Create New...