Thanks! I was looking for something like that so I could improve the timing of sub animations. I have updated the code so now the blinking in panel 3 happens on its own timescale. I also added support for multiple sub animations and opacity changes, which I used to add random blushing to panel 3.
window.requestAnimationFrame() can play more nicely with others (e.g. maybe stopping when the window doesn't have focus, delaying when the CPU is overloaded and maybe other niceties that vary by browser) than setTimeout on modern browsers, at the cost of having to track time yourself.
function init() { ... for( ...) { var frameState = {idx: i, start: null, nextFrame: null} window.requestAnimationFrame(processOverlay.bind(frameState)) } }
function processOverlay(timestamp) { var idx = this.idx; if (!this.start) { this.start = timestamp; this.nextFrame = timestamp }
if (this.nextFrame > timestamp) { // Nothing to do this time. window.requestAnimationFrame(processOverlay.bind(this)); return }
I'm loving the series so far! Simply stunning! I specifically adore the use of the drawings here. They work so well that it was as though you were intending them for this very use! Bravo!