react-animation-hooks

Hooks for animation and transition nodes on mount and demount (e.g., fades, slides).

Usage no npm install needed!

<script type="module">
  import reactAnimationHooks from 'https://cdn.skypack.dev/react-animation-hooks';
</script>

README

react-animation-hooks

Hooks for animation and transition nodes on mount and demount (e.g., fades, slides).

No dependencies, CSS transitions.

import {useFadeIn, useSlideUp} from 'react-animation-hooks';

function App () {
  return (
    <Page {...useFadeIn({duration: 0.5})}>
      <Image {...useSlideUp({delay: 0.25, intensity: 2})}/>
    </Page>
  );
}

API

useAnimate (beforeMountStyles, afterMountStyles)

Base hook to animate in any style. Takes two style objects that contain CSS properties. You can inline it to components as it spits out a ref and style.

<p {...useAnimate({opacity: 0, transition: 'all .2s', {opacity: 1, transition: 'all .2s'}}/>

For now, if you have other inline styles, merge:

const {ref, style} = useAnimate();
return (
  <p ref={ref} style={...style, {color: 'red'}}/>
);

Helper Hooks

Helper hooks are provided that derive from useAnimate:

  • useFadeIn (opts)
  • useSlideUp (opts)
  • useSlideDown (opts)
  • useSlideLeft (opts)
  • useSlideRight (opts)
Option Description
duration Animation duration, as number, in seconds
intensity Multiplier to the transform
function Animation timing function (e.g., 'ease-in-out')
delay Animation delay, as number, in seconds