happy-helium v1.0.18

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

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>