{"id":23546912,"url":"https://github.com/minaxorg/animate-scroll","last_synced_at":"2025-05-15T12:30:20.624Z","repository":{"id":102547282,"uuid":"173926086","full_name":"minaxorg/animate-scroll","owner":"minaxorg","description":"animate scroll","archived":false,"fork":false,"pushed_at":"2020-04-17T01:43:44.000Z","size":612,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-25T16:53:06.289Z","etag":null,"topics":["animate","animate-scroll","scroll","scroll-animate"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/minaxorg.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-05T10:32:10.000Z","updated_at":"2020-10-27T02:27:25.000Z","dependencies_parsed_at":"2023-07-10T02:00:21.974Z","dependency_job_id":null,"html_url":"https://github.com/minaxorg/animate-scroll","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":0.09523809523809523,"last_synced_commit":"3138187bea6e0f0202c24ed407c0011ea972c802"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minaxorg%2Fanimate-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minaxorg%2Fanimate-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minaxorg%2Fanimate-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minaxorg%2Fanimate-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minaxorg","download_url":"https://codeload.github.com/minaxorg/animate-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254340778,"owners_count":22054919,"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":["animate","animate-scroll","scroll","scroll-animate"],"created_at":"2024-12-26T09:13:00.966Z","updated_at":"2025-05-15T12:30:20.566Z","avatar_url":"https://github.com/minaxorg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @minax/animate-scroll \u0026middot; [![npm](https://img.shields.io/npm/v/@minax/animate-scroll.svg)](https://www.npmjs.com/package/@minax/animate-scroll)\nLet the elements have an animated scroll in the React project.\n\n## Install\n``` shell\nnpm i --save @minax/animate-scroll\n```\n\n## Usage\n```\nimport animate from '@minax/animate-scroll'\nanimate(start, end, callback[, options])\n```\n\u003e options is an object composed of the following key\n\nname|type|default|description\n--|--|--|--\nstart|number\\|number[]||animation start point(s)\nend|number\\|number[]||animation end point(s)\ncallback|function||callback with current value(s) when update\nspendTime|number|600|animation duration(ms)\nanimationFunc|AnimationType|'linear'|animation function\n\n### AnimationType\n```\ntype AnimationType = 'linear' |\n  'easeInSine' | 'easeOutSine' | 'easeInOutSine' |\n  'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' |\n  'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' |\n  'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' |\n  'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' |\n  'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' |\n  'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' |\n  'easeInBack' | 'easeOutBack' | 'easeInOutBack' |\n  'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' |\n  'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce'\n```\n\n## Quick Overview\n\n```js\nimport animate from '@minax/animate-scroll'\n\nanimate(0, 100, (value) =\u003e {})\nanimate([0, 0], [100, 200], (values) =\u003e {})\n```\n\n``` jsx\nimport React, { useEffect, useRef } from 'react';\n\nimport animate from '@minax/animate-scroll'\n\nfunction App() {\n  const r = useRef(null)\n  useEffect(() =\u003e {\n    setInterval(() =\u003e {\n      if (r.current) {\n        const { scrollTop, scrollHeight } = r.current\n        animate(\n          scrollTop,\n          Math.random() * scrollHeight,\n          (now) =\u003e {\n            r.current.scrollTop = now\n          },\n          {\n            spendTime: 1000\n          }\n        )\n      }\n    }, 1500);\n  })\n  return (\n    \u003cdiv\n      ref={r}\n      style={{\n        height: 400,\n        margin: 24,\n        overflow: 'auto',\n        textAlign: 'center',\n        border: '1px solid #000'\n      }}\n    \u003e\n      {\n        new Array(40).fill(1).map((i, index) =\u003e (\n          \u003cdiv key={index} style={{ fontSize: 40 }}\u003e{index}\u003c/div\u003e\n        ))\n      }\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003cp\u003e\n  \u003cimg src=\"./docs/images/1.gif\" style=\"border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .2)\" /\u003e\n\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminaxorg%2Fanimate-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminaxorg%2Fanimate-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminaxorg%2Fanimate-scroll/lists"}