Web Animations API - Timing Animation in image-changer with delay/ endDelay

Question

I try to create an image-changer with the WAAPI.

There's a loop of pictures where delay is supposed to increase and endDelay to decrease, but it doesn't work in iterations:

    var changer = document.querySelector( '#gallery' ),
        children = changer.querySelectorAll( 'figure'), 
        aniStartDelay = 0,
        aniDur = 3000,
        aniCombined = (aniStartDelay + aniDur) * (children.length),
        aniEndDelay = aniCombined - (aniDur + aniStartDelay);
    for (var index = 0; index < children.length; index++) {
      children[index].animate([
        { opacity: 0 },
        { opacity: 1 },
        { opacity: 1 },
        { opacity: 0 }
      ], {
        duration: aniDur,
        delay: aniStartDelay,
        endDelay: aniEndDelay,
        iterations: Infinity
      });
      console.log('aniDur: ' + aniDur +', \n aniStartDelay: ' + aniStartDelay + ', \n aniEndDelay: ' + aniEndDelay +'\n\n aniCombined: ' + aniCombined);        
      aniStartDelay = aniStartDelay + aniDur;
      aniEndDelay = aniEndDelay - aniDur;
   }

After two iterations it just seems to flicker irregularly.

I'd be grateful for any ideas to battle this.

TIA Matthias

Answer 1

delay and endDelay apply before and after the whole set of iterations. There is no setting for delay between iterations.

For now your best option is probably to adjust the keyframes to produce the required end-delay effect for the first animation in the sequence by repeating the last keyframe and setting the offset appropriately. Then you can reuse the keyframes and add an appropriate delay to each subsequent animation in the sequence.

Perhaps something like the following might work:

var keyframes = [
  { opacity: 0 },
  { opacity: 1, offset: 1 / children.length * 1 / 3 },
  { opacity: 1, offset: 1 / children.length * 2 / 3 },
  { opacity: 0, offset: 1 / children.length },
  { opacity: 0 }
];
for (var index = 0; index <= children.length; index++) {
  children[index].animate(keyframes, { duration: aniDur * children.length,
                                       delay: index * aniDur,
                                       iterations: Infinity });
}

You can see a similar examples using CSS animations at the following URL (press the right arrow a few times to see the final solution): https://people-mozilla.org/~bbirtles/pres/201511-astro-animation/#/anime-explained

From a spec point of view, the long-term solution is to add timing groups that would let you add empty space between animation effects. That's a while off however. Adding an iteration delay is a common request but there are a number of complications that have yet to be solved (e.g. what fill mode to use during the iteration delay etc.).