Package Exports

framer-motion-hooks

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (framer-motion-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 progress = useInViewScroll(wrapperRef)

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

`useInViewAnimate`

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

const MyComponent = () => {
  const { inViewRef, animation } = useInViewAnimate(variants)

  return <motion.div ref={inViewRef} animate={animation} />
}

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

Note: Also works with direct props on the React element

`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>
}