rc-scroll-anim v2.7.6

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;

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;

Parallax

animation = { }

animation = {},{} is timeline;

Link

v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo

v2.3.0 toHash default is false;

ScrollAnim.scrollScreen.init(vars)

Use: scroll a screen window;

vars = { }

ScrollAnim.scrollScreen.unMount()

Clear a screen scrolling effect;

Event

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