scroll-anim

React ScrollAnim Component.

View demo Download Source

Development

npm install
npm start

Feature

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

install

rc-scroll-anim

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;

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
duration number 450 scroll duration
ease string easeInOutQuad easing
docHeight number null default to HTML height, when body or html the height: 100%, page height can not be obtained, need their own definition
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);

GitHub