animationFrame

const stable

Animation Frame Scheduler

  const animationFrame: any;

Description

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.

Example

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