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>