NextJs and Framer Motion

JavaScript
1

HI guys,
I am adding some animation to my portfolio with framer motion because GSAP with Next was not working I mean probably there was something to do in the next config file but I decided to go with framer for this time, my problem is this I am trying to animate component on scroll separatelly just when they are in view and I am using a mix of intersection observer and framer motion, but giving different refs to the different component it does not work it count 1 single ref and animate everything at once when the first component with ref is in view.

I tried to use this snippet from intersection observer

import React, { useRef } from 'react';
import { useInView } from 'react-intersection-observer';
 
function Component(props) {
  const ref = useRef();
  const [inViewRef, inView] = useInView();
 
  // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop
  const setRefs = useCallback(
    (node) => {
      // Ref's from useRef needs to have the node assigned to `current`
      ref.current = node;
      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
      inViewRef(node);
    },
    [inViewRef],
  );
 
  return <div ref={setRefs}>Shared ref is visible: {inView}</div>;
}

but still count only 1 ref component :frowning:

Do you have any tips to achieve this result?

this is the repo to my Portfolio if you need Next Portfolio

thank you for any advice.

2

Hey Guys I found the solution to my problem.
instead of using the useView hook from intersection observer, I used the component inView and everything works fine, I can have as many as I want of elements in one section and the will start the animation only in they are in viewport.

So for anyone with the same issue try the inView component and you will be fine, obviously on a React or NextJs build.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.