BrianT Posted August 10, 2021 Share Posted August 10, 2021 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. 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. When I run this code the animation does not work. 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 More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 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 1 Link to comment Share on other sites More sharing options...
BrianT Posted August 11, 2021 Author Share Posted August 11, 2021 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 More sharing options...
Solution nico fonseca Posted August 11, 2021 Solution Share Posted August 11, 2021 Hi @BrianT The problem is that Vue only accesses the ref properties after the element is rendered. Hope this can help youhttps://codesandbox.io/s/musing-hodgkin-xww5z?file=/src/views/Home.vue Cheers. Nico. 6 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 11, 2021 Share Posted August 11, 2021 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 5 1 Link to comment Share on other sites More sharing options...
BrianT Posted August 11, 2021 Author Share Posted August 11, 2021 @nicofonseca that is exactly what I was trying to do. It seems my issue was with basic javascript lol. Thank you so much. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now