PrimeTween wrongly applies Ease curve on Yoyo mode?

[MattiaWasFound]

Seeing strange results when transitioning from LitMotion / DOTween to PrimeTween.

Video:

output_sidebyside.mov

LitMotion (right) properly applies time + InBack ease.
PrimeTween (left) just looks completely different, and I can't tell why.

Code:

PrimeTween.Tween.Scale(transform,
                        endValue: 1.2f,
                        duration: .15f,
                        ease: PrimeTween.Ease.InBack,
                        cycles: 2,
                        cycleMode: PrimeTween.CycleMode.Yoyo);
                        

LMotion.Create(transform.localScale, Vector3.one * 1.2f, duration: .15f)
                    .WithEase(LitMotion.Ease.InBack)
                    .WithLoops(2, LitMotion.LoopType.Yoyo)
                    .BindToLocalScale(transform);


transform.DOScale(1.2f, .15f).
                    SetEase(DG.Tweening.Ease.InBack)
                    .SetLoops(2, DG.Tweening.LoopType.Yoyo);

As you can see, they all have the same time (0.15f), ease (InBack), loops (2 - YoYo).

The only thing I can think of is that maybe your implementation of InBack is different?

[MattiaWasFound]

I think I figured it out?

When CycleMode is Yoyo, you should apply the Ease curve in reverse on an odd cycle. Instead, you apply the ease curve straight.

In fact, your library behaves like the other libraries if I force this behaviour:

   PrimeTween.Tween.Scale(ct.transform,
                        endValue: 1.2f,
                        duration: .15f,
                        startDelay: 0f,
                        ease: PrimeTween.Ease.InBack,
                        cycles: 1,
                        cycleMode: PrimeTween.CycleMode.Yoyo).OnComplete(() =>
                        {
                            PrimeTween.Tween.Scale(ct.transform,
                            endValue: 1f,
                            duration: .15f,
                            ease: PrimeTween.Ease.OutBack); <----- NOTE! MANUALLY SELECTING OPPOSITE CURVE!!
                        });

I think what's happening is that you're implementing Yoyo loops like this:

even cycle: lerp(start, end, ease(time))
odd cycle: lerp(end, start, ease(time))

but this is an issue, because it applies the ease curve straight (the opposite of a rewind)!

It should be:

even cycle: lerp(start, end, ease(time))
odd cycle: lerp(start, end, ease(1f - time))

right?

...or maybe this works but I have no idea why, that's also a possibility :)

[MattiaWasFound]

Perhaps a clearer video with more loops:

output_sidebyside.mov

[KyryloKuzyk]

@MattiaTraverso Hey, thanks for flagging this!

With CycleMode.Yoyo, PrimeTween preserves the ease on the backward cycle. Other major tween libraries like tween.js also do this.

Yoyo: animates forth and back, like a yoyo. Easing is the same on the backward cycle.
Rewind: rewinds the tween as if time was reversed. Easing is reversed on the backward cycle.

To achieve the behavior you want, you can use CycleMode.Rewind. It behaves the same way as DOTween's Yoyo.
For what it's worth, DOTween's Yoyo should also be called Rewind because that's what it does :)

[MattiaWasFound]

Fair enough, makes sense!

..but then maybe the Readme should be updated?

you write:

tween.SetLoops(2, LoopType.Yoyo) --> Tween.Position(..., cycles: 2, CycleMode.Yoyo)

which is not correct, if meant as a DoTween migration, no?

[KyryloKuzyk]

Good callout, I'll update the readme.

[KyryloKuzyk]

@MattiaWasFound Done, now readme correctly mentions that Yoyo translates to Rewind in PrimeTween.