gem-hunter

rc-scroll-anim

Browser Support

Development

npm install
npm start

Example

Feature

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

OverPack

Parallax

animation = { }

Link

ScrollAnim.scrollScreen.init(vars)

vars = { }

ScrollAnim.scrollScreen.unMount()

Event

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