framer-motion-hooks

Framer Motion Hooks

Fill the hook gap in Framer Motion.

Installation

npm install framer-motion-hooks

Note: If you prefer yarn instead of npm, just use yarn add framer-motion-hooks.

Hooks

useInViewScroll

Returns a MotionValue representing the y scroll progress that updates when the target element is visible in viewport.

const MyComponent = () => {
  const ref = useRef()

  const progress = useInViewScroll(ref)

  return <motion.div ref={ref} style={{ scale: progress }} />
}

Comprehensive example →

API

const scrollProgress = useInViewScroll(ref, options)

• scrollProgress: A number between 0 and 1 indicating relative page scroll
• ref: React ref target element
• options: (optional) Scroll options (e.g. threshold)

useInViewAnimate Deprecated

Note: Deprecated in favor of Framer Motion's native whileInView prop introduced in version 5.3.

Fires an animation as soon as the element is visible in viewport.

const MyComponent = () => {
  const { inViewRef, animation } = useInViewAnimate({ animate: "visible" })

  return (
    <motion.div
      ref={inViewRef}
      initial="initial"
      animate={animation}
      variants={variants}
    />
  )
}

const variants = {
  initial: {
    x: 0
  },
  visible: {
    x: 200
  }
}

Comprehensive example →

Note: Also works with direct props on the React element

API

const { inViewRef, animation } = useInViewAnimate(variants, options)

• inViewRef: React ref
• animation: Motion animation controls
• variants: Motion target object
• options: (optional) Intersection options

useMotionAsState

Returns a React state value that updates when the MotionValue changes

const MyComponent = () => {
  const { scrollY } = useViewportScroll()

  const reactState = useMotionAsState(scrollY)

  return <span>{reactState}</span>
}

API

const state = useMotionAsState(value)

• state: React state
• value: Motion value

useStateAsMotion

Returns a MotionValue value that updates when the React state changes

const MyComponent = () => {
  const [opacity, setOpacity] = useState(0)

  const motionOpacity = useStateAsMotion(opacity)

  return <motion.div style={{ opacity: motionOpacity }} />
}

API

const value = useStateAsMotion(state)

• value: Motion value
• state: React state