Framer Motion Hooks

Fill the hook gap in Framer Motion.

Installation

``bash
npm install framer-motion-hooks
`

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

Hooks

$3

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

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

const progress = useInViewScroll(ref)

return
}
`

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)

$3

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.

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

return (
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

$3

Returns a React state value that updates when the MotionValue changes

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

const reactState = useMotionAsState(scrollY)

return {reactState}
}
`

#### API

const state = useMotionAsState(value)

- state: React state
- value: Motion value

$3

Returns a MotionValue value that updates when the React state changes

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

const motionOpacity = useStateAsMotion(opacity)

return
}
`

#### API

const value = useStateAsMotion(state)

- value: Motion value
- state`: React state