{"id":21240799,"url":"https://github.com/mrtimofey/transcroll","last_synced_at":"2025-03-15T03:43:56.599Z","repository":{"id":57378977,"uuid":"133901646","full_name":"mrTimofey/transcroll","owner":"mrTimofey","description":"Animate scroll in a flexible, user-friendly, simple and modern way","archived":false,"fork":false,"pushed_at":"2022-05-30T15:01:35.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-22T10:17:19.570Z","etag":null,"topics":["animation","promise","scroll","telegram","transition"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrTimofey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-18T04:09:50.000Z","updated_at":"2022-05-30T15:01:38.000Z","dependencies_parsed_at":"2022-09-02T21:20:49.519Z","dependency_job_id":null,"html_url":"https://github.com/mrTimofey/transcroll","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrTimofey%2Ftranscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrTimofey%2Ftranscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrTimofey%2Ftranscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrTimofey%2Ftranscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrTimofey","download_url":"https://codeload.github.com/mrTimofey/transcroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681003,"owners_count":20330155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","promise","scroll","telegram","transition"],"created_at":"2024-11-21T00:53:29.975Z","updated_at":"2025-03-15T03:43:56.578Z","avatar_url":"https://github.com/mrTimofey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Transcroll\n\nAnimate scroll in a flexible, user-friendly, simple and modern way.\n\nInstall with `npm i transcroll`.\n\nUsage:\n\n```javascript\nimport transcroll, { easings } from 'transcroll';\n\n// animate to an element\ntranscroll(document.querySelector('#whatever'));\n\n// animate to an element by selector string\ntranscroll('#whatever');\n\n// animate to position\ntranscroll(200);\n\n// configuration options and default values\ntranscroll(whatever, {\n\t// scrollable container element\n\tel: window,\n\n\t// target position offset\n\toffset: 0,\n\n\t// scrolling axis, 'x' or 'y'\n\taxis: 'y',\n\n\t// animation duration\n\tduration: 200,\n\n\t// transition easing function, can be a function or a string with an easings object key\n\teasing: easings.easeInQuad,\n\n\t// jump factor or false to disable (more information below)\n\tjump: 2,\n\n\t// immediately stop animation if user uses a mousewheel\n\tinterrupt: true\n});\n\n// do something on animation end\ntranscroll(whatever).then(({\n\t// animation started after \"jump\" is triggered\n\tjumped,\n\t// animation was interrupted by user\n\tinterrupted\n}) =\u003e doSomething());\n\n// same with async/await\nconst asyncTranscroll = async () =\u003e {\n\tconst { jumped, interrupted } = await transcroll(whatever);\n\tdoSomething();\n}\n```\n\n## Jump factor\n\n`jump` argument is used to calculate a threshold value which is used to prevent animating too big distances in a\nshort period of time.\n\nthreshold = duration * jumpFactor\n\nYou can feel same behavior in the Telegram application when trying to scroll to the last message in a chat after\nscrolling back to some old messages about 4-5 screens.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtimofey%2Ftranscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrtimofey%2Ftranscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtimofey%2Ftranscroll/lists"}