Narcissistic Project Managers

    framer-motion-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    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

    Install

    npm i framer-motion-hooks

    DownloadsWeekly Downloads

    158

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • matthiaaas