@minax/animate-scroll ·

Let the elements have an animated scroll in the React project.

Install

npm i --save @minax/animate-scroll

Usage

import 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

AnimationType

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'

Quick Overview

importanimatefrom'@minax/animate-scroll'animate(0,100,(value)=>{})animate([0,0],[100,200],(values)=>{})

importReact,{useEffect,useRef}from'react';importanimatefrom'@minax/animate-scroll'functionApp(){constr=useRef(null)useEffect(()=>{setInterval(()=>{if(r.current){const{ scrollTop, scrollHeight }=r.currentanimate(scrollTop,Math.random()*scrollHeight,(now)=>{r.current.scrollTop=now},{spendTime: 1000})}},1500);})return(<divref={r}style={{height: 400,margin: 24,overflow: 'auto',textAlign: 'center',border: '1px solid #000'}}>{newArray(40).fill(1).map((i,index)=>(<divkey={index}style={{fontSize: 40}}>{index}</div>))}</div>);}