happy-helium
v1.0.18
Published
React scroll animation library for Happy Money
Downloads
45
Readme
Happy Helium
Scroll reveal component built with React.
Usage
@import { FadeUp } from 'happy-helium'
<FadeUp>
<YourChildComponent/>
</FadeUp>
Dependencies
react^16.2.0 | react-dom^16.2.0
⚠️ You must import the helium CSS file
import "~happy-helium/dist/css/happy-helium.css";
Components available
<FadeUp></FadeUp>
<FadeIn></FadeIn>
<FadeDown></FadeDown>
<FadeLeft></FadeLeft>
<FadeRight></FadeRight>
<ZoomIn></ZoomIn>
Default Options
| PropName | Type | Default |
|---|---|---|
| offset
| number | 8
|
| speed
| number | 750
|
| easing
| string | 'cubic-bezier(0.215, 0.61, 0.355, 1)'
|
| transitionDistance
| number | 50
|
| delay
| number | 0
|
| transitionOut
| bool | true
|
| onEnter
| func | false
|
| onExit
| func | false
|
Default Options Override
const heliumOptions = {
speed: 350,
easing: 'ease',
transitionDistance: 300,
delay: 40,
transitionOut: false,
animation: true,
offset: 50 //based on percentage from bottom of browser window
}
<FadeUp {...heliumOptions}></FadeUp>
Passing custom functions
<FadeUp
onEnter={() => console.log('on element enter')}
onExit={() => console.log('on element exit'}
></FadeUp>