Triggers a callback function every animation frame. Optionally pass a time parameter in your callback function to track callback start time. useFrame() calls are paused when running in background tabs.

In the past, setTimeout and setInterval were commonly used to iterate a block of code for animations. Using these causes the browser to paint frames quicker than most screen refresh rates of 60 FPS. This results in skipped frames and unnecessary computation, making snappy animations. UseFrame() executes the passed call back function more efficiently by eliminating unnecessary repaints and bundling multiple animations into a single repaint cycle.

Usage

useFrame(callback: (time?: number), deps?: readonly any[]): () => void;

Example

Sliding an element to the right by 500px.

import { useFrame } from 'vev';

export default function() {
  var startTime = null;

  useFrame((time) => {
    if(!startTime) startTime = time;
    var progress = time - startTime;
    const boxElement = document.getElementById('SomeElementYouWantToAnimate'); 
    if(progress < 5000){
      boxElement.style.left = (progress / 10) + 'px';
    }
  });

  return (
    <div className="fill">
      <div id="SomeElementYouWantToAnimate" style={{left: 0}}></div>
    </div>
  );
}