I want to control time

Submitted by Tyler Larson

Some DOM elements give you access to their current time but most do not. What frame is your gif or animated PNG playing? Are your CSS animations in sync with the animated images and videos you have playing on the page? Wouldn't it be nice to know or have the ability to stop them from animating?

I work on a product that gives people more control over time. I slow down frame rates if their device has limited capabilities, I show progress bars in situations where it is appropriate, I pause animation when modals are shown over top. To do all of this I've needed to reimplement GIF parsing with streaming data processing, canvas renderers with layers of caching and time management with control over frame rates that understands the difference between GIF frame delays in hundredths of seconds, video currentTime in seconds, and standard JS time in milliseconds. I sync our global concept of time with the the animation of these images and other vector animations for text and so on.

Tagged
JavaScript User experience
This was presented at