https://github.com/minaxorg/animate-scroll
animate scroll
https://github.com/minaxorg/animate-scroll
animate animate-scroll scroll scroll-animate
Last synced: about 1 year ago
JSON representation
animate scroll
- Host: GitHub
- URL: https://github.com/minaxorg/animate-scroll
- Owner: minaxorg
- Created: 2019-03-05T10:32:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-17T01:43:44.000Z (about 6 years ago)
- Last Synced: 2025-04-25T16:53:06.289Z (about 1 year ago)
- Topics: animate, animate-scroll, scroll, scroll-animate
- Language: TypeScript
- Homepage:
- Size: 598 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @minax/animate-scroll · [](https://www.npmjs.com/package/@minax/animate-scroll)
Let the elements have an animated scroll in the React project.
## Install
``` shell
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
```js
import animate from '@minax/animate-scroll'
animate(0, 100, (value) => {})
animate([0, 0], [100, 200], (values) => {})
```
``` jsx
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 (
{
new Array(40).fill(1).map((i, index) => (
{index}
))
}
);
}
```
