Open alphabetabc opened 7 months ago
Hello, can you provide a link to the codepen containing the complete demo?
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
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.
Re-opening, as the merge for this broke the yoyo demo, which I've reverted. See
We assumed passing unit tests were enough, but we forgot to test the actual yoyo demo! 🥴
Fwiw - I'm having the same issue on both 23.1.3
and 25.0.0
. @humodz's easing workaround worked for me.
demo
result