Orchestrating parent and child component animations

[naaadz]

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()

1. to.parentTween
2. to.parentTween2
3. 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)
4. to.parentTween4
5. 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

[Rodrigo]

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!

[naaadz]

Thank you @Rodrigo, i put up a simple repro on codesandbox.

https://codesandbox.io/s/aged-hooks-6tnjvm

 

Intended behavior:

1. 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
2. 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

[naaadz]

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