CODEWITHSUNDEEP
reactjsframer-motion
dorriz
dorriz

Reputation: 2689

framer motion detect what image is in view of an infinite scroll

If someone could give me some advice on this problem I have spent a long time on.

There is an example here

You might have to refresh the app to see the animation running. Using the refresh button shown in the image below: enter image description here

I animate a series of divs using framer-motion . You'll see the red divs infintely scroll across the view.

Below the animated images (line 178 in the code) is a component that renders buttons , one for each giv in the animation. It is passed the activeIndex which initially is set to 0. This applies some css styling to that button in the component.

However when the animation runs I do not see how to update the index when an image enters the view , using setIndex.

How would I be able to get the index or id of an div when it enters the animation and use that to update the index to update the 'Dot' component.

I hope that is clear. Thanks for any thoughts, I've loode all over and haven't seen how to do it.

Upvotes: 0

Views: 272

Answers (1)

Paulo Fernando
Paulo Fernando

Reputation: 3660

I think I was able to kind of achieve the behavior you wanted:

https://codesandbox.io/p/sandbox/kind-leavitt-5nf4fy

It's basically a crazy logic to set the active based on how much the container is dragged:

  useMotionValueEvent(dragX, "change", (latest) => {
    const index = parseInt((1100 + latest) / 350);
    const invertedIndex = Math.abs(6 - index);
    setImgIndex(invertedIndex);
  });

  useEffect(() => {
    setImgIndex(INITIAL_INDEX);
    let controls = animate(dragX, [0, -1100, 1100, 0], {
      ease: "linear",
      duration: 20,
      repeat: Infinity,
      repeatType: "loop",
      repeatDelay: 0,
    });

    return controls?.stop;
  }, []);

But I really don't recommend it, for the behavior you want, you will have much better luck using a carousel, you can search for some examples of react carousel in google.

Upvotes: 1

Related Questions