framer-motion-visible

Utility function to trigger framer motion animations when a node is visible in the viewport

Usage no npm install needed!

<script type="module">
  import framerMotionVisible from 'https://cdn.skypack.dev/framer-motion-visible';
</script>

README

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