https://github.com/mrtimofey/transcroll
Animate scroll in a flexible, user-friendly, simple and modern way
https://github.com/mrtimofey/transcroll
animation promise scroll telegram transition
Last synced: about 1 year ago
JSON representation
Animate scroll in a flexible, user-friendly, simple and modern way
- Host: GitHub
- URL: https://github.com/mrtimofey/transcroll
- Owner: mrTimofey
- Created: 2018-05-18T04:09:50.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-05-30T15:01:35.000Z (about 4 years ago)
- Last Synced: 2025-02-22T10:17:19.570Z (over 1 year ago)
- Topics: animation, promise, scroll, telegram, transition
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Transcroll
Animate scroll in a flexible, user-friendly, simple and modern way.
Install with `npm i transcroll`.
Usage:
```javascript
import transcroll, { easings } from 'transcroll';
// animate to an element
transcroll(document.querySelector('#whatever'));
// animate to an element by selector string
transcroll('#whatever');
// animate to position
transcroll(200);
// configuration options and default values
transcroll(whatever, {
// scrollable container element
el: window,
// target position offset
offset: 0,
// scrolling axis, 'x' or 'y'
axis: 'y',
// animation duration
duration: 200,
// transition easing function, can be a function or a string with an easings object key
easing: easings.easeInQuad,
// jump factor or false to disable (more information below)
jump: 2,
// immediately stop animation if user uses a mousewheel
interrupt: true
});
// do something on animation end
transcroll(whatever).then(({
// animation started after "jump" is triggered
jumped,
// animation was interrupted by user
interrupted
}) => doSomething());
// same with async/await
const asyncTranscroll = async () => {
const { jumped, interrupted } = await transcroll(whatever);
doSomething();
}
```
## Jump factor
`jump` argument is used to calculate a threshold value which is used to prevent animating too big distances in a
short period of time.
threshold = duration * jumpFactor
You can feel same behavior in the Telegram application when trying to scroll to the last message in a chat after
scrolling back to some old messages about 4-5 screens.