Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
​
<div id="container">
  <div id="element"></div>
</div>
<div id="animationState"></div>
 
#container {
  width: 300px;
  height: 100px;
  border: solid black 5px;
  border-radius: 55px;
}
​
#element {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
}
​
#animationState {
  white-space: pre;
}
 
// Playback controls
// -----------------
// element.animate() returns an Animation object
// with basic playback controls.
var animation = element.animate({
  transform: ['none', 'translateX(200px)'],
  background: ['red', 'orange'],
}, {
  duration: 4000,
  fill: 'both',
});
​
var actions = {
  play: function() { animation.play(); },
  reverse: function() { animation.reverse(); },
  pause: function() { animation.pause(); },
  "seek halfway": function() { animation.currentTime = 2000; },
  "speed up": function() { animation.playbackRate += 0.25; },
  "slow down": function() { animation.playbackRate -= 0.25; },
  finish: function() { animation.finish(); },
  cancel: function() { animation.cancel(); },
};
​
for (var action in actions) {
  (function(action) {
    var button = document.createElement('button');
    button.textContent = action;
    button.addEventListener('click', function() {
      actions[action]();
    });
    document.body.appendChild(button);
  })(action);
}
​
function formatTime(time) {
  return (time === null) ? null : parseInt(time);
}
​
function showAnimationState() {
  animationState.textContent = '' +
      'playState: ' + animation.playState + '\n' +
      'currentTime: ' + formatTime(animation.currentTime) + '\n' +
      'startTime: ' + formatTime(animation.startTime) + '\n' +
      'playbackRate: ' + animation.playbackRate;
  requestAnimationFrame(showAnimationState);
}
showAnimationState();
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers