Web Animations API - Setting Keyframes?

Question

I have been playing around with the Web Animations API and have found it to quite intutive to get going.
From my point of view, I want to make a pretty simple animation, where a element is rotated in one direction and after a button press is rotated in the other direction. When using the standard reverse method, the animation stops because it runs out time.

I have tried using the setKeyframes Method to change the transform direction, which doesnt seem to be working in Chrome. Inside my Firefox Developer Edition its working just fine...

Can someone look over my approach and tell me if I am missing something? Please bear in mind, that im pretty new to JS in general.

Thanks in advance,
Niklas

JSFiddle with my code

//This is what my JS Code looks like
//I have commented out the parts that throw a error inside Chrome
var fan = document.getElementById('fan');

var cw = new KeyframeEffect(
  fan, [{
      transform: "rotate(0)"
    },
    {
      transform: "rotate(360deg)",
    }
  ], {
    // timing options
    duration: 8000,
    iterations: Infinity,
  });

//creates new Animation object and starts it in clockwise rotation
var fananim = new Animation(cw, document.timeline);

//Stops Animation so it doesnt run automatically
fananim.pause();


var clockwise = function() {
 /* cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(360deg)",
      }
    ]
  ); */
  fananim.play();
}

var counterclockwise = function() {
  /* cw.setKeyframes(
    [{
        transform: "rotate(0)"
      },
      {
        transform: "rotate(-360deg)",
      }
    ]
  ); */
  fananim.play();

  //this leads to the time running out and the animation stopping
  //fananim.reverse();
}


var stop = function() {
  fananim.pause();
}

// Click Handlers for Buttons on Control Baord
var ela = document.getElementById("cw");
ela.addEventListener("click", clockwise, false);

var elb = document.getElementById("ccw");
elb.addEventListener("click", counterclockwise, false);

var elc = document.getElementById("stop");
elc.addEventListener("click", stop, false);

Answer 1

Are you testing in Chrome Canary with experimental Web platform features enabled? If not, setKeyframes may not be available.

For what it's worth the animation seems to work for me with a few tweaks:

var fan = document.getElementById('fan');

var cw = new KeyframeEffect(
  fan,
  [
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ],
  {
    // timing options
    duration: 8000,
    iterations: Infinity,
  }
);

// Creates new Animation object and starts it in clockwise rotation
// NOTE(BB): No need for document.timeline, it's the default.
var fananim = new Animation(cw /*, document.timeline*/);

// Stops Animation so it doesnt run automatically
// NOTE(BB): It only runs automatically if you use Element.animate()
// fananim.pause();

var clockwise = function() {
  cw.setKeyframes([
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ]);
  fananim.play();
};

var counterclockwise = function() {
  cw.setKeyframes([
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(-360deg)',
    },
  ]);
  fananim.play();
};

var stop = function() {
  fananim.pause();
};

// Click Handlers for Buttons on Control Baord
var ela = document.getElementById('cw');
ela.addEventListener('click', clockwise, false);

var elb = document.getElementById('ccw');
elb.addEventListener('click', counterclockwise, false);

var elc = document.getElementById('stop');
elc.addEventListener('click', stop, false);

JSFiddle

However, the stop method does not appear to work on Chrome Canary. I will reach out to some Chrome folks to see what is going on.

A few notes about my tweaks:

• There's no need to pause() an animation created with new Animation(). It's only needed when you use elem.animate(...) which creates the animation and plays it automatically.

  [However, calling pause() will put it in the paused state instead of the idle state which might be useful if the first frame of the animation is different to the element's existing state.]

• You don't need to specify document.timeline in the constructor to Animation() since it is the default.

You could also change the direction of the animation using cw.updateTiming({ direction: 'reverse' }). However, both this approach and the setKeyframes() approach will make the animation jump. I would probably just try seeking far into the animation and using reverse(). That will produce a smooth update even if the animation is running on another thread and will also have the advantage of being possible with the subset of the API shipping in release versions of Chrome and Firefox. For example,

const fan = document.getElementById('fan');
const fananim = fan.animate(
  [
    {
      transform: 'rotate(0)',
    },
    {
      transform: 'rotate(360deg)',
    },
  ],
  {
    duration: 8000,
    iterations: Infinity,
  }
);

fananim.pause();
fananim.startTime = -1000 * 1000;

function clockwise() {
  if (fananim.playbackRate < 0) {
    fananim.reverse();
  }
  if (fananim.playState !== 'running') {
    fananim.play();
  }
}

function counterclockwise() {
  if (fananim.playbackRate > 0) {
    fananim.reverse();
  }
  if (fananim.playState !== 'running') {
    fananim.play();
  }
}

function stop() {
  fananim.pause();
}

const ela = document.getElementById('cw');
ela.addEventListener('click', clockwise, false);

const elb = document.getElementById('ccw');
elb.addEventListener('click', counterclockwise, false);

const elc = document.getElementById('stop');
elc.addEventListener('click', stop, false);

JSFiddle

I still encounter some issues in Chrome Canary with this version however. Hopefully the Chrome folks can work out what is going on.