{"id":22153039,"url":"https://github.com/react-component/scroll-anim","last_synced_at":"2025-04-04T06:09:40.672Z","repository":{"id":48428634,"uuid":"48568257","full_name":"react-component/scroll-anim","owner":"react-component","description":"Animate Scroll React Component","archived":false,"fork":false,"pushed_at":"2021-07-26T21:14:55.000Z","size":5804,"stargazers_count":305,"open_issues_count":13,"forks_count":43,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-10-30T02:29:50.237Z","etag":null,"topics":["react-animation","scroll-anim","scroll-animations"],"latest_commit_sha":null,"homepage":"http://react-component.github.io/scroll-anim/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-25T05:49:27.000Z","updated_at":"2024-09-13T16:35:32.000Z","dependencies_parsed_at":"2022-09-05T05:51:23.551Z","dependency_job_id":null,"html_url":"https://github.com/react-component/scroll-anim","commit_stats":null,"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fscroll-anim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fscroll-anim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fscroll-anim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Fscroll-anim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/scroll-anim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128752,"owners_count":20888235,"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":["react-animation","scroll-anim","scroll-animations"],"created_at":"2024-12-02T01:16:20.806Z","updated_at":"2025-04-04T06:09:40.652Z","avatar_url":"https://github.com/react-component.png","language":"JavaScript","readme":"# rc-scroll-anim\n---\n\nReact ScrollAnim Component\n\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-scroll-anim.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-scroll-anim\n[travis-image]: https://img.shields.io/travis/react-component/scroll-anim.svg?style=flat-square\n[travis-url]: https://travis-ci.org/react-component/scroll-anim\n[coveralls-image]: https://img.shields.io/coveralls/react-component/scroll-anim.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/react-component/scroll-anim?branch=master\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-scroll-anim.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-scroll-anim\n\n\n## Browser Support\n\n|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|\n| --- | --- | --- | --- | --- |\n| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |\n\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Example\n\nhttp://localhost:8020/examples/ \n\nhttp://react-component.github.io/scroll-anim/\n\nhttp://ant.design/\n\n\n## Feature\n\n* support ie8,ie8+,chrome,firefox,safari\n\n## install\n\n[![rc-scroll-anim](https://nodei.co/npm/rc-scroll-anim.png)](https://npmjs.org/package/rc-scroll-anim)\n\n\n## Usage\n\n#### ScrollOverPack \n```js\nvar ScrollAnim = require('rc-scroll-anim');\nvar ScrollOverPack = ScrollAnim.OverPack;\nvar React = require('react');\n\n// ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;\n\nReact.render(\u003cScrollOverPack\u003e\n  \u003cQueueAnim key='queueAnim'\u003e\n    \u003cdiv key='a'\u003eenter\u003c/div\u003e\n    \u003cdiv key='b'\u003eenter\u003c/div\u003e\n    \u003cdiv key='b'\u003eenter\u003c/div\u003e\n  \u003c/QueueAnim\u003e\n  \u003cTweenOne key='tweenOne' vars={{x:100}}\u003eone element\u003c/TweenOne\u003e\n  \u003cAnimate key='rc-animate' transitionName=\"fade\" transitionAppear\u003erc-animate\u003c/Animate\u003e\n\u003c/ScrollOverPack\u003e, container);\n```\n#### Parallax\n\n```js\nvar ScrollParallax = ScrollAnim.Parallax;\nReact.render(\u003cScrollParallax animation={{x:100}}\u003eParallax\u003c/ScrollParallax\u003e,container);\n```\n\n#### Link, Element\n\n```js\nvar Link = ScrollAnim.Link;\nvar Element = ScrollAnim.Element;\nReact.render(\u003cdiv\u003e\n  \u003cdiv className=\"nav\"\u003e\n    \u003cLink className=\"nav-list\" to=\"page0\"\u003enav0\u003c/Link\u003e\n    \u003cLink className=\"nav-list\" to=\"page1\"\u003enav1\u003c/Link\u003e\n  \u003c/div\u003e\n  \u003cElement className=\"pack-page\" id=\"page0\"\u003edemo\u003c/Element\u003e\n  \u003cElement className=\"pack-page\" id=\"page1\"\u003edemo\u003c/Element\u003e\n\u003c/div\u003e,container);\n```\n\n### scrollScreen\n\n```js\nScrollAnim.scrollScreen.init();\nScrollAnim.scrollScreen.unMount();\n```\n\n## API\n\n\u003ca href='https://motion.ant.design/api/scroll-anim' target='_blank'\u003e中文文档\u003c/a\u003e\n\n### props\n\n### Element \n\n\u003e `Element` or `OverPack` must set height;\n\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| component | string         | `div`   | -            |\n| id | string         | null    | need to location the id，parallax the `location` or link the `to`, need to use |\n| targetId  |  string        | null    |  scroll target id, if don't window scroll, parent element is `overflow: scroll`, use parent id to do scroll; [demo refs](http://react-component.github.io/scroll-anim/examples/target.html) |\n| playScale | number / array / string       | `0.5`   | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave \u003e= bottomEnter |\n| replay    | boolean        | `false` | play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate |\n| onChange  | func           | null     | change callback({ mode, id }); mode: `enter` or `leave` |\n| onScroll  | func           | null     | scroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }). |\n| location  | string         | null     |  v0.6.0 above have,location, the parent id; |\n| componentProps | object | null | component props. |\n\n\u003e Note: if the element is not the above component, you need to location this element; please use the `Element`\n\n### OverPack \n\nOverPack inherit Element; `component` `playScale` `onChange`  `onScroll` `location` `replay` refer to  `Element`;\n\n\u003e 1.0.0 remove hideProps;\n\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| always    | boolean        | `true`  | back to top, enter replay，as `false` will only play it again, leave does not play |\n| appear | boolean         | `true`  | whether support appear the operation |\n| componentProps | object | null | component props. |\n\n### Parallax\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| animation      | object / array | `null`  | animation data     |\n| location  | string         | `null`  | location, the parent id |\n| always    | boolean        | `true`  | -            |\n| targetId  |  string        | null    | refer Element `targetId` |\n| component | string         | `div`   | -            |\n| componentProps | object | null | component props. |\n\n#### animation = { }\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| playScale | array          | `[0, 1]`| play area, [start, end]\u003cbr/\u003e timeline: `[{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]]`, Second will increase by 0.2, The second end is 1  |\n| ease      | string         | `easeInOutQuad`| animation easing string |\n| onUpdate  | function       |    -    |  animate updates, callback: onUpdate(percent)   |\n| onStart   | function       |    -    |  scroll down animate start (playScale[0]) callback; |\n| onComplete| function       |    -    |  scroll down animate completed (playScale[1]) callback |\n| onStartBack   | function       |    -    |   scroll up animate start (playScale[1]) callback; |\n| onCompleteBack | function       |    -    |   scroll up animate completed (playScale[0]) callback; |\n\n\u003e animation = [{},{}] is timeline;\n\n### Link\n\n\u003e v1.1.0 remove onAsynchronousAddEvent. [Asynchronous demo](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html)\n\n\u003e v2.3.0 toHash default is false;\n\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| to  | string         | `null`  | need; Specifies the element to top; `Element` the id  |\n| toHash | boolean     | false    | add `to` to the `location.hash` |\n| duration  | number         | `450`   | scroll animate duration |\n| ease      | string         | `easeInOutQuad` | animation easing string | \n| active    | string         | `active`| selected className  |\n| showHeightActive| string / number / array | `50%` | enter: the element offset top `50%` add `active`, leave: the element in the window `50%` remove `active`; is array [enter, leave]; |\n| toShowHeight | boolean     | false   | scroll to `showHeightActive` |\n| offsetTop |  number        |  0      | scroll to elem top offset   |\n| targetId  |  string        | null    | refer Element `targetId` |\n| onFocus   | func           | null    | check callback,onFocus({target,to}) |\n| onBlur    | func           | null    | blur callback |\n| component | string         | `div`   | -            |\n| componentProps | object | null | component props. |\n\n### ScrollAnim.scrollScreen.init(vars)\nUse: scroll a screen window;\n\n#### vars = { }\n\n| name      | type           | default | description    |\n|-----------|----------------|---------|----------------|\n| location  | array          | []      | llocation of scrolling screen, only element ID is supported in array |\n| duration  | number         | 450     | scroll duration   |\n| ease      | string         | `easeInOutQuad` | easing |\n| docHeight | number         | null    | Custom html height |\n| loop      | boolean        | false   | Before and after the phase cycle  |\n| scrollInterval | number    | 1000    | rolling interval time |\n\n### ScrollAnim.scrollScreen.unMount()\n\nClear a screen scrolling effect;\n\n### Event \n```jsx\nvar Event = ScrollAnim.Event;\nEvent.addEventListener('scroll.xxxx',func);\nEvent.removeEventListener('scroll.xxx',func);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fscroll-anim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Fscroll-anim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Fscroll-anim/lists"}