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:
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.