Fill the hook gap in Framer Motion
npm install framer-motion-hooksFill the hook gap in Framer Motion.
``bash`
npm install framer-motion-hooks
Note: If you prefer yarn instead of npm, just use yarn add framer-motion-hooks.
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
}
`
#### API
const scrollProgress = useInViewScroll(ref, options)
- scrollProgress: A number between 0 and 1 indicating relative page scrollref
- : React ref target elementoptions
- : _(optional)_ Scroll options (e.g. threshold)
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 (
initial="initial"
animate={animation}
variants={variants}
/>
)
}
const variants = {
initial: {
x: 0
},
visible: {
x: 200
}
}
`
Note: Also works with direct props on the React element
#### API
const { inViewRef, animation } = useInViewAnimate(variants, options)
- inViewRef: React refanimation
- : Motion animation controlsvariants
- : Motion target objectoptions
- : _(optional)_ Intersection options
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 statevalue
- : Motion value
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 valuestate`: React state
-