Installation 🖥
npm install react-spring-numerical
What is it? 🤔
A barebones 3-4kb implementation of react-spring. It contains the spring mathematics, the Spring primitive, and support for raw, numerical values or arrays. It will not understand colors, paths, strings, units, etc. Use this for applications that can get away with numerical animations (which you can still interpolate into anything you like) and basic springs.
Use it like always
import React from 'react'import ReactDOM from 'react-dom'import Spring from 'react-spring-numerical' ReactDOM
Native
The createAnimatedComponent
may seem unfamiliar, react-spring has that as well, but for convenience it ships with a collection of html-elements that are already transformed - the downside is that it takes more bytes.
import Spring createAnimatedComponent from 'react-spring-numerical' const AnimatedDiv = <Spring = => <AnimatedDiv =>hello</AnimatedDiv></Spring>
Custom interpolators
Either call interpolators on the animated value itself or use the slightly more flexible interpolate
function which takes an array or animated values and a function that receives their actual, numerical values and returns the interplated result.
import Spring createAnimatedComponent interpolate from 'react-spring-numerical' const AnimatedDiv = <Spring = => opacity vec <AnimatedDiv = => hello </AnimatedDiv> </Spring>