gem-hunter
Language: JavaScript
Animate Scroll React Component
React ScrollAnim Component
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
http://localhost:8020/examples/
http://react-component.github.io/scroll-anim/
var ScrollAnim = require('rc-scroll-anim'); var ScrollOverPack = ScrollAnim.OverPack; var React = require('react'); // ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one; React.render(<ScrollOverPack> <QueueAnim key='queueAnim'> <div key='a'>enter</div> <div key='b'>enter</div> <div key='b'>enter</div> </QueueAnim> <TweenOne key='tweenOne' vars={{x:100}}>one element</TweenOne> <Animate key='rc-animate' transitionName="fade" transitionAppear>rc-animate</Animate> </ScrollOverPack>, container);
var ScrollParallax = ScrollAnim.Parallax; React.render(<ScrollParallax animation={{x:100}}>Parallax</ScrollParallax>,container);
var Link = ScrollAnim.Link; var Element = ScrollAnim.Element; React.render(<div> <div className="nav"> <Link className="nav-list" to="page0">nav0</Link> <Link className="nav-list" to="page1">nav1</Link> </div> <Element className="pack-page" id="page0">demo</Element> <Element className="pack-page" id="page1">demo</Element> </div>,container);
ScrollAnim.scrollScreen.init(); ScrollAnim.scrollScreen.unMount();
ElementorOverPackmust set height;
| name | type | default | description |
|---|---|---|---|
| component | string | div |
- |
| id | string | null | need to location the id，parallax the location or link the to, need to use |
| targetId | string | null | scroll target id, if don't window scroll, parent element is overflow: scroll, use parent id to do scroll; demo refs |
| playScale | number / array / string | 0.5 |
percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
| replay | boolean | false |
play every enter, do you want to animate each time you show the current, false only scroll to down play animate |
| onChange | func | null | change callback({ mode, id }); mode: enter or leave |
| onScroll | func | null | scroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }). |
| location | string | null | v0.6.0 above have,location, the parent id; |
| componentProps | object | null | component props. |
Note: if the element is not the above component, you need to location this element; please use the
Element
OverPack inherit Element; component playScale onChange onScroll location replay refer to Element;
1.0.0 remove hideProps;
| name | type | default | description |
|---|---|---|---|
| always | boolean | true |
back to top, enter replay，as false will only play it again, leave does not play |
| appear | boolean | true |
whether support appear the operation |
| componentProps | object | null | component props. |
| name | type | default | description |
|---|---|---|---|
| animation | object / array | null |
animation data |
| location | string | null |
location, the parent id |
| always | boolean | true |
- |
| targetId | string | null | refer Element targetId |
| component | string | div |
- |
| componentProps | object | null | component props. |
| name | type | default | description |
|---|---|---|---|
| playScale | array | [0, 1] |
play area, [start, end] timeline: [{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]], Second will increase by 0.2, The second end is 1 |
| ease | string | easeInOutQuad |
animation easing string |
| onUpdate | function | - | animate updates, callback: onUpdate(percent) |
| onStart | function | - | scroll down animate start (playScale[0]) callback; |
| onComplete | function | - | scroll down animate completed (playScale[1]) callback |
| onStartBack | function | - | scroll up animate start (playScale[1]) callback; |
| onCompleteBack | function | - | scroll up animate completed (playScale[0]) callback; |
animation = [{},{}] is timeline;
v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo
v2.3.0 toHash default is false;
| name | type | default | description |
|---|---|---|---|
| to | string | null |
need; Specifies the element to top; Element the id |
| toHash | boolean | false | add to to the location.hash |
| duration | number | 450 |
scroll animate duration |
| ease | string | easeInOutQuad |
animation easing string |
| active | string | active |
selected className |
| 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]; |
| toShowHeight | boolean | false | scroll to showHeightActive |
| offsetTop | number | 0 | scroll to elem top offset |
| targetId | string | null | refer Element targetId |
| onFocus | func | null | check callback,onFocus({target,to}) |
| onBlur | func | null | blur callback |
| component | string | div |
- |
| componentProps | object | null | component props. |
Use: scroll a screen window;
| name | type | default | description |
|---|---|---|---|
| location | array | [] | llocation of scrolling screen, only element ID is supported in array |
| duration | number | 450 | scroll duration |
| ease | string | easeInOutQuad |
easing |
| docHeight | number | null | Custom html height |
| loop | boolean | false | Before and after the phase cycle |
| scrollInterval | number | 1000 | rolling interval time |
Clear a screen scrolling effect;
var Event = ScrollAnim.Event; Event.addEventListener('scroll.xxxx',func); Event.removeEventListener('scroll.xxx',func);