• Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About yannick

  • Rank
  1. yannick

    Ideal vue.js setup for playing and reversing timelines

    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?
  2. 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.
  3. yannick

    Arrow function in onComplete

    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.
  4. yannick

    Arrow function in onComplete

    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); } })...
  5. yannick

    Reverse timeline in different order

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

    Reverse timeline in different order

    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.
  7. yannick

    Reverse timeline in different order

    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?