Use-animation-on-screen NPM

UseAnimationOnScreen

UseAnimationOnScreen is a lightweight React hook that allows you to give life to your website by animating any element when it enters the screen.

Including many animation types, transition duration, screen entry ratio.

`Installation`

npm install use-animation-on-screen

`usage`

import { useAnimationOnScreen } from "use-animation-on-screen";
export default App = () => {
  //  With default config
  const element = useAnimationOnScreen();

  // With custom config
  const element = useAnimationOnScreen({
    screenEntryRatio: 0.9,
    animationType: "fade-up",
    transitionDuration: 800,
    makeAnimationUnique: false,
  });

  //Add the ref to your element
  return (
    <>
      <div ref={element}>Hello World</div>
    </>
  );
};

`Config`

key	option type	default	Comment
`screenEntryRatio`	`number`	`0.9`	When the animation happens on the screen. From `0` (top of the screen) to `1` (bottom of the screen )
`animationType`	`string`	`fade-up`	Type of animation (`fade-up`, `fade-left`, `fade-right`, `zoom-in`, `zoom-out`)
`makeAnimationUnique`	`boolean`	`false`	Makes the animation happen only once after the element enters the screen
`transitionDuration`	`number`	`800`	In ms, `0` disables the transition
`animationDelay`	`number`	`0`	In ms, delays when the animation happens
`transitionTimingFunction`	`string`	`ease-out`	The transition-timing-function property specifies the speed curve of the transition effect.