naaadz Posted December 8, 2022 Share Posted December 8, 2022 I'm hoping someone can provide some high-level insight on how i can orchestrate timelines between a parent and child components in Vue. my application works like: (ps. this is a pseudo code example, no need to critique syntax) masterTimeline.pause() to.parentTween to.parentTween2 to.parentTween3 mount a child component play child component's timeline wait for it to finish (it emits a response when it's done to a method in my parent) to.parentTween4 to.parentTween5 masterTimeline.play() masterTimeline.reverse() ------- The problem is #3: i dont know how to wait properly for the child to finish. I've tried using a promise with .then(), but it only executes once it will not excecute on reverse. I looked into this article but its hooks seem specific to react only, and it seems overly complicated. I'm using Vue 3 composition API with gsap 3. Is there a pattern i'm missing for modern component architecture and gsap? Thank you Link to comment Share on other sites More sharing options...
Rodrigo Posted December 8, 2022 Share Posted December 8, 2022 Hi, Is really hard for us to offer help without a minimal demo that we can take a look at. For the description you provide, and correct me if I'm getting this wrong, you want to start a main timeline, mount a child component mid-way through that timeline, pause the main timeline, play the child component's animation and then resume the main timeline? Or you want to add an animation that involves the child component in the main timeline on the parent component? Honestly I think the best course in these situations is to create an animation on a child component and add that to a timeline in the parent component using the available communication options in Vue3 and lifecycle hooks. Keep in mind that normally lifecycle hooks in Vue are triggered in child components first: https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events There are many factors that can come into play here, so there could be many different ways to approach it as well, from using GSAP Context and text selectors, using Vue's next tick function in lifecycle hooks, to using a watcher and a ref value and run your code when the ref is updated based on a callback from the child component. Unfortunately, as I mentioned before, without a minimal demo, there is no way for us to know exactly what you are dealing with here. Hopefully this helps in some way. Happy Tweening! Link to comment Share on other sites More sharing options...
naaadz Posted December 8, 2022 Author Share Posted December 8, 2022 Thank you @Rodrigo, i put up a simple repro on codesandbox. https://codesandbox.io/s/aged-hooks-6tnjvm Intended behavior: Press play red parent boxes animate in second parent contains a child, so the parent boxes wait for the blue child boxes once the blue boxes are done, the red boxes can continue Press reverse the reverse should happen And you can repeat it by pressing play and reverse as many times as you want Notes: Right now #1 works, but #2 does not. I know this is wrong because a promise can only execute once. Also taking a promise resolve out of its constructor seems like a hack. I experimented also with passing the child timeline in the payload to the parent, but i couldn't get it working at all. Just wondering if i'm missing something big when it comes to parent child components. Thanks if you can offer advice Link to comment Share on other sites More sharing options...
Solution naaadz Posted December 10, 2022 Author Solution Share Posted December 10, 2022 I think i did get this working by just emiting the timeline object from the child on child-mount. Since Vue mounts the children before the parent, it can pick up the payload on parent-mount like this: https://codesandbox.io/s/vigilant-satoshi-dlp4wd 1 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