Let the elements have an animated scroll in the React project.
npm i --save @minax/animate-scrollimport animate from '@minax/animate-scroll' animate(start, end, callback[, options]) options is an object composed of the following key
| name | type | default | description |
|---|---|---|---|
| start | number|number[] | animation start point(s) | |
| end | number|number[] | animation end point(s) | |
| callback | function | callback with current value(s) when update | |
| spendTime | number | 600 | animation duration(ms) |
| animationFunc | AnimationType | 'linear' | animation function |
type AnimationType = 'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' | 'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce' import animate from '@minax/animate-scroll' animate(0, 100, (value) => {}) animate([0, 0], [100, 200], (values) => {})import React, { useEffect, useRef } from 'react'; import animate from '@minax/animate-scroll' function App() { const r = useRef(null) useEffect(() => { setInterval(() => { if (r.current) { const { scrollTop, scrollHeight } = r.current animate( scrollTop, Math.random() * scrollHeight, (now) => { r.current.scrollTop = now }, { spendTime: 1000 } ) } }, 1500); }) return ( <div ref={r} style={{ height: 400, margin: 24, overflow: 'auto', textAlign: 'center', border: '1px solid #000' }} > { new Array(40).fill(1).map((i, index) => ( <div key={index} style={{ fontSize: 40 }}>{index}</div> )) } </div> ); } 