Creating an Infinite Vertical Carousel with Framer Motion
I'm working on building a vertical carousel using Framer Motion in my React application. The carousel moves downwards, but I'm facing an issue where it stops at the end and doesn't loop continuously. What I want to achieve is an infinite loop where the bottom-most picture smoothly transitions back to the top. Is there a way to achieve this, possibly with CSS or through a different approach in Framer Motion?
https://github.com/roycejwilliams/royce-portfolio-react/blob/main/royce-portfolio/src/components/Carousel.jsx
GitHub
royce-portfolio-react/royce-portfolio/src/components/Carousel.jsx a...
Contribute to roycejwilliams/royce-portfolio-react development by creating an account on GitHub.
5 Replies
Kevin just posted a video about an infinite scroll the other day. Should work the same for vertical though his is horizontal.
@ntkunz thanks I’ll give it a look
Just be very careful on creating infinite vertical carousel areas especially if you have content underneath it, this can lock the user on mobile devices
@Gashy do you think it’s best to remove it on mobile to avoid issues?
All depends on how you are thinking of setting it up, could set up some form of threshold which will let the user scroll down, or what I'd probably do instead is make it so the direction is horizontal on mobile and give some indication that the user can swipe left/right on it.
Or even better just have it stack naturally on mobile