Framer-motion Animation With Typescript: ScrollY doesn't find .current

Adrián Pérez García 0
Viewed 24

I'm trying to create an animation that hides the menu when the user scrolls down and when the user returns to the top the menu appears.

Everything works, but the problem comes when I try to give to the scrollY property that gives the useScroll hook a type.

This is the code that I could not find the way to implement the type.

 const { scrollY } = useScroll();
 const [isScrolling, setScrolling] = useState<boolean>(false);

 const handleScroll = () => {
  if (scrollY?.current < scrollY?.prev) setScrolling(false);
  if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) setScrolling(true);
 };

useEffect(() => {
  return scrollY.onChange(() => handleScroll());
});
framer-motion types reactjs typescript
1 Answers

I found the solution!

Reading the documentation framer, I saw that they updated the way to get the value of the previous and current scroll.

scrollY.get() -> Current

scrollY.getPrevious() -> Previous

 const { scrollY } = useScroll();
 const [isScrolling, setScrolling] = useState<boolean>(false);

 const handleScroll = () => {
  if (scrollY.get() < scrollY.getPrevious()) setScrolling(false);
  if (scrollY.get() > 100 && scrollY.get() > scrollY.getPrevious()) setScrolling(true);
 };

 useEffect(() => {
  return scrollY.onChange(() => handleScroll());
 });
Adrián Pérez García0
Related