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: 6 days 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 (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-05-30T15:01:35.000Z (over 2 years ago)
• Last Synced: 2024-12-21T02:12:22.912Z (about 1 month 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.