juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.4k stars 3.68k forks source link

Loop: Number doesn't work in timelines #815

Open different55 opened 2 years ago

different55 commented 2 years ago

Describe the bug In timelines, looping for a certain number of iterations doesn't work, it'll freeze after the first loop.

To Reproduce Steps to reproduce the behavior:

anime.timeline().add({
    target: "body",
    opacity: 0,
    loop: 4,
    duration: 500,
    direction: "alternate",
});

Expected behavior Whole page should fade in and out several times.

Desktop (please complete the following information):

Additional context Doing some console.logging in update and loopComplete callbacks, it looks like the animation within a timeline start out paused, but still plays through once, then immediately burns through all its loops when it reaches the end.

Yukiniro commented 1 year ago

Actually, anime doesn't support loop for child animation in the timeline. So, we add a loop property for the timeline to resolve this problem. Hope it is useful for you. Here is a online demo

anime({
      targets: "body",
      opacity: 0,
      loop: 4,
      duration: 500,
      direction: 'alternate',
      autoplay: false,
})
juliangarnier commented 1 year ago

Loops in timelines will work in V4!