See the Code - See it Full Page - See Details
Using an input[type=range] to act like a timeline control for five separate animations. Viewable in latest Firefox (better in dev/nightly), Chrome, Opera To simplify (and this is a big caveat): all the animations are 1) starting at the same time and 2) finishing at the same time. Without this, everything becomes more complicated with the current version of the WAAPI (but I feel doable)... though once timelines and groups/sequences make their way we will have more options. `requestAnimationFrame` to move the input range during the animation. Each animation's `currentTime` is updated when the input gets an `input` event or a `change` event. Inspired by a comment/question on the [CSS Animations vs Web Animations API](https://css-tricks.com/css-animations-vs-web-animations-api/#comment-1609249) article at CSS-Tricks
This Pen uses: HTML, CSS, JavaScript, and