Question 212606 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why is Typescript telling me " 'offset' does not exist in type 'UseScrollOptions' "?

I am building a React website with NextJS 13, Typescript, and Framer Motion. I have the following code, basically copied and pasted from the Framer docs:

const { scrollYProgress } = useScroll({ target: targetRef, container: containerRef, offset: ['start end', 'end end'], });

Typescript is underlining ‘offset’ and telling me

'offset' does not exist in type 'UseScrollOptions'

How could type offset not exist in UseScrollOptions when the docs tell you that’s how to do it? I’ve used this method of creating animations with scroll before and I’ve never received this error. What am I doing wrong?

I tried uninstalling and reinstalling Framer motion (I am using 10.13). I even tried rolling back to 10.12 and it gave me the same answer. I have no idea how to fix this when I am copying and pasting from the docs and it isn’t working.

Tags:

2

Answers


  1. 0

    You must have defined a type called UseScrollOptions, which values ​​are defined with their own types: target: targetRef, container: containerRef, but you did not define the offset in this type.

    interface UseScrollOptions {
    target: TTarget,
    container: type,
    offset: TOffset,
    }

    enum TOffset { ‘start end’, ‘end end’}

    type TTarget {
    enum1: type1,
    enum2: type1
    enum3: type1
    enum4: type1
    }

    Login or Signup to reply.
  2. 0

    Oddly enough, it seems like it has not been defined as a type in the ‘framer-motion’ package

    Here the interface UseScrollOptions is defined and it does not define a type for ‘offset’: line 10
    https://github.com/framer/motion/blob/main/packages/framer-motion/src/value/use-scroll.ts

    And neither does ScrollOptions that it extends: line 3
    https://github.com/framer/motion/blob/main/packages/framer-motion/src/render/dom/scroll/types.ts

    Possible solution would be to create a PR to their repo with a fix.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search