framer-motion-hooks
v1.0.10
Published
Fill the hook gap in Framer Motion
Downloads
64
Maintainers
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 ref = useRef()
const progress = useInViewScroll(ref)
return <motion.div ref={ref} style={{ scale: progress }} />
}
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)
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
}
}
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
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 statevalue
: 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 valuestate
: React state