Framer Motion - Visible

Utility React hook to trigger framer motion animations when a node is visible in the viewport.

Installation

npm i framer-motion-visible

Usage

function Title({ children }) {
  const visibleAnimation = useVisibleAnimation({
    initial: { x: -40, y: 40, opacity: 0 },
    visible: { x: 0, y: 0, opacity: 1 },
  });
 
  return <motion.h1 {...visibleAnimation}>{children}</motion.h1>;
}

Development

Uses microbundle for development setup.

Following command for running a dev library build.

npm run dev