React Animation On Screen

React Animation On Screen is a custom React hook to check when an element is appearing on the screen and apply some animation to it.

Installation

npm install reactanimationonscreen

Usage

Initiate the function inside an useEffect passing an array of classnames you want to apply the animation, an array of css classes with the animations to be applied.

import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(targetClassNames: string[], animationClassNames: string[]);
}, []);

Example

import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(
    ["subtitle", "paragraph"],
    ["subtitleAnimation", "paragraphAnimation"]
  );
}, []);

Extra Feature 1

By default the animation is applied when the target starts to appear on the bottom of the screen but if you want the animation to be applied later you can pass a third argument to the function call.

The example below only applies the animation when the target is 250px above the bottom of the screen.

import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(["title"], ["titleAnimation"], 250);
}, []);

Extra Feature 2

By default the animation is applied only the first time the target appears on the viewport, but if you want the animation to be applied everytime the target enters the viewport pass a boolean true value as the fourth argument to the function call.

import useOnScreen from "reactanimationonscreen";

useEffect(() => {
  const sections = useOnScreen(["title"], ["titleAnimation"], 250, true);
}, []);