Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
rc-scroll-anim
Advanced tools
scroll-anim anim component for react
Weekly downloads
Readme
React ScrollAnim Component
IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
http://localhost:8020/examples/
http://react-component.github.io/scroll-anim/
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);
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);
ScrollAnim.scrollScreen.init();
ScrollAnim.scrollScreen.unMount();
Element
orOverPack
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 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. |
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. |
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. |
Use: scroll a screen window;
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 |
Clear a screen scrolling effect;
var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);
FAQs
scroll-anim anim component for react
The npm package rc-scroll-anim receives a total of 2,109 weekly downloads. As such, rc-scroll-anim popularity was classified as popular.
We found that rc-scroll-anim demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.