yannick

Thanks a lot. That works exaclty how expected. Just to clarify. Why do you add the reverse() function at the end of the mounted hook? Will it add the ability to reverse the timeline in general? If I'm not mistaken the methods is the same as. if ( !this.textTl.reversed() ) { this.textTl.play() } else { this.textTl.reverse() } Am I correct?

How do you setup a vue component to be able to play and reverse a timeline upon a certain event? When I setup a method containing the timeline instance it wll be declared everytime the method is called. The reverse function won't work in this case.

Thanks for the answer. The first solution works great. Thanks a lot. I'm using this timeline in a Vue method. In the named function this is not bound to the component. That's why I want to use the arrow function.

Hi, how can someone use a arrow function as a onComplete handler? The arrow function won't get executed in the example below. this.gmapTl = new TimelineMax({ paused: true, onComplete: onCompleteFn })... const onCompleteFn = () => { console.log(this.gmapBlurred); this.gmapBlurred = !this.gmapBlurred console.log(this.gmapBlurred); } Although this works fine. this.gmapTl = new TimelineMax({ paused: true, onComplete: () => { console.log(this.gmapBlurred); this.gmapBlurred = !this.gmapBlurred console.log(this.gmapBlurred); } })...

Thanks a lot, I think that solves this issue appropriately.

Hi Shaun, thanks for your answer. What you describe is exactly what I mean. How do right justify the tweens on reverse()? If I add .progress(1) to the reverse function it's still waiting for the first animation.

var tlChangeMenuButton = new TimelineMax({ paused: true, onComplete: onComplete, onReverseComplete: onComplete }); tlChangeMenuButton .to(me.$subLetters, 2, { autoAlpha: 0, y: "-20%", scale: .4, transformOrigin: "50% 0%", ease: Power3.easeInOut }, "scene1") .to(me.$mainLetter, .4, { fill: colors.dark, stroke: colors.dark, ease: Power3.easeInOut }, "scene1" ) .to(me.$subLetterSvg, 0, { display: "none" }) Hi, I have this setup and I'm trying to get $mainLetter and $subLetters to get started at the same time either way. If I set a label like "scene1" it works as expected on the forward animation but if the animation is triggered by tl.reverse() it'll play $subLetters first and wait for it to finish before $mainLetters is played. Does anyone have a suggestion how to animate the two elements always at the same time no matter which way?