[bug] yoyo has wrong value

[alphabetabc]

demo

const rootEl = document.getElementById("root");
Object.assign(rootEl.style, {
    width: "800px",
    height: "600px",
});

rootEl.innerHTML = "loading";

const dataX = [];
const dataY = [];

let i = 0;
createAnimationQueue({
    from: { value: 1 },
    to: { value: 1.5 },
    yoyo: true,
    repeat: 3,
    onUpdate: (o) => {
        dataX.push(i++);
        dataY.push(o.value);
    },
    onComplete: () => {
        const chart = ec.init(rootEl);
        chart.setOption({
            xAxis: {
                type: "category",
                data: dataX,
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    data: dataY,
                    type: "line",
                },
            ],
        });
    },
});

result

[mk965]

Hello, can you provide a link to the codepen containing the complete demo?

[humodz]

https://codepen.io/humodz/pen/YzgEpXG

When the red ball reaches the end of the animation, on both directions, it blinks to the opposite side for a split second

[humodz]

As a workaround until it's fixed, we can call TWEEN.update twice, like so:

requestAnimationFrame(function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
  TWEEN.update(time);
});

This twill trigger callbacks twice which is a bummer, but at least the weird jump goes away

Another workaround would be to generate an yoyo-ified easing function, like as follows:

function yoyo(f) {
  return t => {
    if (t < 0.5) {
      return f(2 * t);
    } else {
      return 1 - f(2 * (t - 0.5));
    }
  }
}

new TWEEN.Tween({ x: 0 })
  .to({ x: 200 }, 2000 * 2) // duration needs to be doubled 
  .repeat(Infinity)
  //.yoyo(true)
  .easing(yoyo(t => TWEEN.Easing.Cubic.InOut(t)))

The only gotcha is that the duration of the tween needs to be doubled, because now a single iteration does both the forward and backward movement.

[trusktr]

Fixed in

• fix yoyo repeat #683 thanks to @humodz !

Released in v23.1.2

[trusktr]

Re-opening, as the merge for this broke the yoyo demo, which I've reverted. See

• Is yoyo working as expected ? #687

We assumed passing unit tests were enough, but we forgot to test the actual yoyo demo! 🥴

[bendytree]

Fwiw - I'm having the same issue on both 23.1.3 and 25.0.0. @humodz's easing workaround worked for me.

[ManHunter]

Is anyone working on a fix? this is a pretty big bug that makes it impossible to use yoyo.

[FrostKiwi]

I can confirm this issue to be true for me as well. Thought the way I pass in time was somehow wrong. Only thing I can think of is JS being quantized to a specific step size for security reasons.

@humodz your #677 (comment) solution worked perfectly.

[jeroenman]

Also having this issue

[willeastcott]

Also having this issue

I suspect this is affecting a great many people who are probably just relying on the workaround of calling update twice. I certainly am. 😄

[yifeidai]

I'm still having this problem on v23.1.3. Is there anyone who is working on this? It break the yoyo api and I can't use it.

[jeroenman]

I'm still having this problem on v23.1.3. Is there anyone who is working on this? It break the yoyo api and I can't use it.

I used the branch https://github.com/tweenjs/tween.js/tree/fix-yoyo-wrong-by-calculateElapsedPortion a while back and that worked for me. else the double update would fix it too