Socket
Socket
Sign inDemoInstall

rc-scroll-anim

Package Overview
Dependencies
14
Maintainers
1
Versions
93
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-scroll-anim

scroll-anim anim component for react


Version published
Maintainers
1
Weekly downloads
2,493
decreased by-4.19%

Weekly downloads

Readme

Source

rc-scroll-anim


React ScrollAnim Component

NPM version build status Test coverage node version npm download

Browser Support

IEChromeFirefoxOperaSafari
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

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

nametypedefaultdescription
componentstringdiv-
idstringnullneed to location the id,parallax the location or link the to, need to use
targetIdstringnullscroll target id, if don't window scroll, parent element is overflow: scroll, use parent id to do scroll; demo refs
playScalenumber / array / string0.5percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave], topLeave >= bottomEnter
replaybooleanfalseplay every enter, do you want to animate each time you show the current, false only scroll to down play animate
onChangefuncnullchange callback({ mode, id }); mode: enter or leave
onScrollfuncnullscroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }).
locationstringnullv0.6.0 above have,location, the parent id;
componentPropsobjectnullcomponent 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;

nametypedefaultdescription
alwaysbooleantrueback to top, enter replay,as false will only play it again, leave does not play
appearbooleantruewhether support appear the operation
componentPropsobjectnullcomponent props.

Parallax

nametypedefaultdescription
animationobject / arraynullanimation data
locationstringnulllocation, the parent id
alwaysbooleantrue-
targetIdstringnullrefer Element targetId
componentstringdiv-
componentPropsobjectnullcomponent props.
animation = { }
nametypedefaultdescription
playScalearray[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
easestringeaseInOutQuadanimation easing string
onUpdatefunction-animate updates, callback: onUpdate(percent)
onStartfunction-scroll down animate start (playScale[0]) callback;
onCompletefunction-scroll down animate completed (playScale[1]) callback
onStartBackfunction-scroll up animate start (playScale[1]) callback;
onCompleteBackfunction-scroll up animate completed (playScale[0]) callback;

animation = [{},{}] is timeline;

v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo

v2.3.0 toHash default is false;

nametypedefaultdescription
tostringnullneed; Specifies the element to top; Element the id
toHashbooleanfalseadd to to the location.hash
durationnumber450scroll animate duration
easestringeaseInOutQuadanimation easing string
activestringactiveselected className
showHeightActivestring / number / array50%enter: the element offset top 50% add active, leave: the element in the window 50% remove active; is array [enter, leave];
toShowHeightbooleanfalsescroll to showHeightActive
offsetTopnumber0scroll to elem top offset
targetIdstringnullrefer Element targetId
onFocusfuncnullcheck callback,onFocus({target,to})
onBlurfuncnullblur callback
componentstringdiv-
componentPropsobjectnullcomponent props.

ScrollAnim.scrollScreen.init(vars)

Use: scroll a screen window;

vars = { }
nametypedefaultdescription
locationarray[]llocation of scrolling screen, only element ID is supported in array
durationnumber450scroll duration
easestringeaseInOutQuadeasing
docHeightnumbernullCustom html height
loopbooleanfalseBefore and after the phase cycle
scrollIntervalnumber1000rolling 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);

Keywords

FAQs

Last updated on 18 Nov 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc