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>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="log"></div>
  <div id="css"></div>
  <div id="js"></div>
</body>
</html>
 
#log {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 60vw;
  height: 100px;
  border: 2px solid black;
  overflow: auto;
  background: white;
  z-index: 1;
}
​
@keyframes anim {
  from { opacity: 0; }
  to { opacity: 1; }
}
​
#css {
  position: absolute;
  top: 110vh;
  height: 100px;
  width: 100px;
  background: green;
  animation: anim 10s linear;
  animation-timeline: view();
}
#js {
  position: absolute;
  top: 110vh;
  left: 50vh;
  height: 100px;
  width: 100px;
  background: green;
}
​
body {
  height: 300vh;
}
 
let logEl = document.querySelector('#log');
​
function log(html) {
  logEl.innerHTML += html;
  logEl.scrollTop = logEl.scrollHeight;
}
​
let jsAnim = document.querySelector('#js').animate(
  {opacity: [0, 1]},
  {
    timeline: new ViewTimeline({subject: document.querySelector('#js')})
  }
);
const animationEventTypes = ['finish', 'animationstart', 'animationend'];
​
for (let target of ['#css', '#js']) {
  let el = document.querySelector(target);
  if (target == '#js')
    el = jsAnim;
  for (let eventType of animationEventTypes) {
    el.addEventListener(eventType, (evt) => {
      let html = `${target}: ${eventType}`;
      for (let prop of ['elapsedTime', 'currentTime']) {
        if (evt[prop] !== undefined)
          html += ` ${prop}=${evt[prop]}`;
      }
      html += '<br>';
      log(html);
    });
  }
}
Output

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

Dismiss x
public
Bin info
flackrpro
0viewers