Skip to content

Heaust-ops/use-interpolation

Repository files navigation

use-interpolation

This is a react hook that works with numbers and tensors, the tensor shape once initialized is fixed,

when you set the value with this hook, it smoothly interpolates to the next value,

Import the hook first,

import { useInterpolation } from "react-use-interpolation";

And then use it like so,

const initialPosition = [0,0,1];
const duration = 2; // seconds
const [position, setPosition, setDuration] = useInterpolation(initialPosition, duration);

Or alternatively,

const initialValue = 24;
const duration = 2; // seconds
const [value, setValue, setDuration] = useInterpolation(initialValue, duration);

you can also pass in additional arguments for the animation type and fps, the default animation type is "lerp", but you can also use "ease-in-out" the default fps is 60, here's an example of utilizing all arguments,

const initialPosition = [0,0,1];
const duration = 2; // seconds
const [position, setPosition, setDuration] = useInterpolation(initialPosition, duration, "ease-in-out", 144);

image

interpolation_hook_demo.mp4

About

A useState-like hook that smoothly interpolates between states

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published