wilsonpage / fastdom

Eliminates layout thrashing by batching DOM measurement and mutation tasks
6.83k stars 240 forks source link

Use fastdom for animation loop #48

Closed Prinzhorn closed 9 years ago

Prinzhorn commented 9 years ago

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 https://github.com/wilsonpage/fastdom/blob/cb94019569275f6ac2636c179b6b92b28cbf1636/examples/animation.html#L79 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 (https://github.com/wilsonpage/fastdom/blob/cb94019569275f6ac2636c179b6b92b28cbf1636/index.js#L224)

pyramids commented 9 years ago

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.

wilsonpage commented 9 years ago

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 :)

Prinzhorn commented 9 years ago

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.