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

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

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

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

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? https://codepen.io/naaadz/pen/XWYoPEr/2f9093547e4a7610f254093f3fec4118?editors=0010 Indended behavior: press play button writes the word style reveals THAT types the letters compiles starts the flashing underscore press reverse button underscore stops all other animations reverse in the opposite order they were revealed TYSM Nadia

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!

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. 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: Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated!

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

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

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

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