const stable

Animation Frame Scheduler

const animationFrame: any;


Perform task when window.requestAnimationFrame would fire

When animationFrame scheduler is used with delay, it will fall back to async scheduler behaviour.

Without delay, animationFrame scheduler can be used to create smooth browser animations. It makes sure scheduled task will happen just before next browser content repaint, thus performing animations as efficiently as possible.


Schedule div height animation

// html: <div style="background: #0ff;"></div>
import { animationFrameScheduler } from 'rxjs';

const div = document.querySelector('div');

animationFrameScheduler.schedule(function(height) {
  div.style.height = height + "px";

  this.schedule(height + 1);  // `this` references currently executing Action,
                              // which we reschedule with new state
}, 0, 0);

// You will see a div element growing in height

© 2015–2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors.
Code licensed under an Apache-2.0 License. Documentation licensed under CC BY 4.0.