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.