TweenTo backwards to some Label not calls it's callback

[Aprioriacquit]

Good day!

I was testing some gsap features, and tried to create infinite text swapping animation. But when sometimes I need to smoothly force change text. I am getting bugs.
So:

I have such method:

 

 

protected createAnimationTimeline(): void {
    this._animationTimeline?.kill();
    this._animationTimeline = new TimelineMax({ repeat: -1, repeatDelay: this._animationParams.delayBetweenTextsSwap })
        .to(this.placeholderText, this._animationParams.duration, { alpha: 0 })
        .add(() => this.swapText(), "swapTextLabel")
        .to(this.placeholderText, this._animationParams.duration, { alpha: 1 })
        .play();
}

 

 

 

and 

 

 

 

protected forceSwapText(): void {
    this._animationTimeline.tweenTo("swapTextLabel");
}

 

_____________________CASE_ONE____________________________

when _animationTimeline moves from this part:
.to(this.placeholderText, this._animationParams.duration, { alpha: 0 })
to
 .add(() => this.swapText(), "swapTextLabel")
___________________________________________________________

 - >>>>>>>>>> forceSwapText calls -> everything is ok -> this.swapText() will be inited.

But for case 

____________________CASE_TWO____________________________

when _animationTimeline moves from this part:
 .add(() => this.swapText(), "swapTextLabel")
to
.to(this.placeholderText, this._animationParams.duration, { alpha: 1 })
___________________________________________________________

 - >>>>>>>>>> forceSwapText calls -> moving animations play backwards -> this.swapText() will be not inited.



QUESTION:
How to make tweenTo("swapTextLabel") always use callback (regardless movement is normal or backwards) ?

 

 

Thanks a lot, if someone could help me even iwth hint.

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi @Aprioriacquit and welcome to the GSAP Forums!

 

Besides echoing the need of a minimal demo you have this on your code:

.add(() => this.swapText(), "swapTextLabel")

Where is that method exactly? What it does? That would be important to know. Also you have this:

protected forceSwapText(): void {
  this._animationTimeline.tweenTo("swapTextLabel");
}

Where is the forceSwapText method being used?

 

As mentioned please provide a minimal demo (emphasis on minimal) that clearly illustrates the problem you're having.

 

Happy Tweening!

[Mendax]

@Rodrigo I did some example

See the Pen eYqwvPM by Gerikvolf (@Gerikvolf) on CodePen.

 

this._animationTimeline = new TimelineMax({ repeat: -1, repeatDelay: 0.5 })
    .to(this.placeholderText, this._animationParams.duration, { alpha: 0 }) // let it be stage1
    .add(() => this.swapPlaceholderText(), "swapTextLabel")                 // let it be stage2
    .to(this.placeholderText, this._animationParams.duration, { alpha: 1 }) // let it be stage3
    .play();

small reminder what the problem:

1. When we are between stage1 and stage2 -> calling tweenTo swapTextLabel smoothly moves to this point and calls it's callback
2. When we are between stage2 and stage3 -> calling tweenTo swapTextLabel smoothly moves to this point BUT DONT calls it's callback

Creating codepen with same version pixi and gsap:

1. When we are between stage1 and stage2 -> calling tweenTo swapTextLabel smoothly moves to this point and calls it's callback (but for some reason stops animation)
2. When we are between stage2 and stage3 -> calling tweenTo swapTextLabel smoothly moves to this point and calls it's callback (but for some reason stops animation)

 

 

Strange thing that both(my local game and codepen) use same versions and tweenTo are identical. The one difference that gsap uses my own ticker.
 

p.tweenTo = function(position, vars) {
    vars = vars || {};
    var copy = {ease:_easeNone, useFrames:this.usesFrames(), immediateRender:false, lazy:false},
       Engine = (vars.repeat && _globals.TweenMax) || TweenLite,
       duration, p, t;
    for (p in vars) {
       copy[p] = vars[p];
    }
    copy.time = this._parseTimeOrLabel(position);
    duration = (Math.abs(Number(copy.time) - this._time) / this._timeScale) || 0.001;
    t = new Engine(this, duration, copy);
    copy.onStart = function() {
       t.target.paused(true);
       if (t.vars.time !== t.target.time() && duration === t.duration() && !t.isFromTo) { //don't make the duration zero - if it's supposed to be zero, don't worry because it's already initting the tween and will complete immediately, effectively making the duration zero anyway. If we make duration zero, the tween won't run at all.
          t.duration( Math.abs( t.vars.time - t.target.time()) / t.target._timeScale ).render(t.time(), true, true); //render() right away to ensure that things look right, especially in the case of .tweenTo(0).
       }
       if (vars.onStart) { //in case the user had an onStart in the vars - we don't want to overwrite it.
          vars.onStart.apply(vars.onStartScope || vars.callbackScope || t, vars.onStartParams || []); //don't use t._callback("onStart") or it'll point to the copy.onStart and we'll get a recursion error.
       }
    };
    return t;
};

[Mendax]

Ok, seems like something affects timeline. So it's works wrong in my case. But let here stays some example of text swap anyway.


thanks for help
 

[Rodrigo]

Hi,

 

You're using an extremely outdated version of GSAP: 2.1.3 and most likely the code you pasted in your last post is from that particular version of GSAP. The latest version is 3.12.5; Any particular reason for that? We strongly recommend to always use the latest version.

 

Is your demo working as you expect? Everything seems to be working as expected in that demo as far as I can see.