rc-scroll-anim

React ScrollAnim Component

Browser Support

| | | | | | | --- | --- | --- | --- | --- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

Development

npm install
npm start

Example

http://localhost:8020/examples/

http://react-component.github.io/scroll-anim/

http://ant.design/

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

ScrollOverPack

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);

Parallax

var ScrollParallax = ScrollAnim.Parallax;
React.render(<ScrollParallax animation={{x:100}}>Parallax</ScrollParallax>,container);

Link, Element

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);

scrollScreen

ScrollAnim.scrollScreen.init();
ScrollAnim.scrollScreen.unMount();

API

中文文档

props

Element

Element or OverPack must 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

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. |

Parallax

| 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. |

animation = { }

| 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;

Link

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. |

ScrollAnim.scrollScreen.init(vars)

Use: scroll a screen window;

vars = { }

| 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 |

ScrollAnim.scrollScreen.unMount()

Clear a screen scrolling effect;

Event

var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);