wilsonpage/fastdom

Use fastdom for animation loop

Prinzhorn opened this issue · 3 comments

Naive as I am I did the following

var animationLoop = function() {
    doStuff();
    fastdom.write(animationLoop);
};

fastdom.write(animationLoop);

which results in an endless loop.

  1. Why is that? From what I understand both calls should happen in two different frames. When I first call write it is scheduled. As soon as raf fires, the function is called and another call is scheduled.
  2. Is there a way to use fastdom for animation loops? I mean you already do all the requestAnimationFrame prefixing and polyfilling magic. But even the demo itself uses the global raf
    raf = window.requestAnimationFrame(update);
    so I wonder if this is something you considered? I thought it'd be great to get rid of another dependency (e.g. https://github.com/kof/animation-frame) if I use fastdom anyway.

After reading through the code I know the reason and I assume it is intended behavior. If you schedule a write inside a write, then this loop will keep looping because the new write is pushed to the same array (

while (id = list.shift()) {
)

Did you look into using defer? I'm no expert for fastdom, but would (naively!) expect that to work the way you intended write to work.

IMO this use-case doesn't sound like a job for fastdom. You should only really use fastdom if you need read dimensions/position values from the DOM and also make changes to DOM structure without causing thrashing.

If you're animating transform, you should just be able to to do a simple requestAnimationFrame loop. For compatibility you'll need these lines.

Closing this for now :)

Thanks. As I said, I'm already using https://github.com/kof/animation-frame and was just wondering if I could get rid of it because I'm also using fastdom. I'll stick with it then.