[Orchestrating parent and child component animations]

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

[Orchestrating parent and child component animations]

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

[Orchestrating parent and child component animations]

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

[Reverse a timeline without reversing a repeating tween]

Wow! its perfect, ty so much, @mvaneijgen!!!

[Reverse a timeline without reversing a repeating tween]

Hey gsap'ers:

 

I have a timeline of tweens that i want to play forward: that reveals text into view. Then i want to reverse it, so the text reveals out of view.

 

The problem is: the last tween has a blinking tween that repeats infinite, and if i reverse the timeline, it tries to play all the blinks back before it starts to play the other tweens which is not what i want.

 

I tried to separate the blinking part to another timeline, it's not staggering the two timelines correctly.

 

Blake said to do it like this in a previous post

 

gsap.timeline()
  .add(timeline1)
  .add(timeline2, "+=0.5")
  .add(timeline3, "+=0.5")
  ...

 

but it's not working for me with ">" position parameter, it doesn't seem to be waiting for the full t1to be done before starting t2.

 

Would you mind looking at this code, and seeing where i can improve it?

 

Indended behavior:

1. press play button
   1. writes the word style
   2. reveals THAT
   3. types the letters compiles
   4. starts the flashing underscore
2. press reverse button
   1. underscore stops
   2. all other animations reverse in the opposite order they were revealed

 

TYSM

Nadia

 

 

 

 

See the Pen 2f9093547e4a7610f254093f3fec4118?editors=0010 by naaadz (@naaadz) on CodePen

[GSAP / Scrollmagic / DrawSVG Reverse Tween Problem]

Craig, you saved my life!

 

I tried the idea of a callback before and couldn't get it to work, but your line#24 is what did the trick!

 

.setTween(TweenMax.fromTo(tl, 1, {progress:1}, {progress:0}))

 

Somehow wrapping my timeline inside another one like this makes it work.

 

Thanks also for covering this even though it's an external plugin unrelated to GSAP, you're my hero!

 

 

[GSAP / Scrollmagic / DrawSVG Reverse Tween Problem]

Hello.

 

Thanks as always for the awesome product!

 

This problem is driving me nuts, and i know this includes Scrollmagic, but can you just tell me WHY this doesn't work?  I'm sure you've seen it before and maybe have a simple answer.

 

WHAT IS SUPPOSED TO HAPPEN

My svg animation is supposed to play on init, then when i scroll up, the animation reverses, and when I scroll back down, it plays again.  Here's a pen of just the animation and some play and reverse buttons that is working as it should without scrollmagic.

See the Pen gKgXoB by naaadz (@naaadz) on CodePen

 

 

THE PROBLEM

Once I define the reverse tween for scrollmagic (even using pause:true) it shows the svg statically on init, it won't play.  Here's my pen that just won't work:

See the Pen wXgrLX by naaadz (@naaadz) on CodePen

 

 

Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated!

See the Pen wXgrLX by naaadz (@naaadz) on CodePen

[GSDevTools with npm, Webpack and Vuejs 2.x]

Excellent!  That works. I am impressed with the quality and speediness of support on this forum.  Thanks again!

[GSDevTools with npm, Webpack and Vuejs 2.x]

I just sent you my project, Thanks for looking into it!

[GSDevTools with npm, Webpack and Vuejs 2.x]

Thanks for the quick reply.  That did not work for me though

[GSDevTools with npm, Webpack and Vuejs 2.x]

I'm having the same issue: "Cannot read property 'create' of undefined"  - I completed all steps above, here's a screencap of my log: