Learn Animating Slides with Framer Motion

To add smooth transitions between slides, we use Framer Motion’s AnimatePresence and motion.img.

<AnimatePresence mode="wait">
  <motion.img
    key={images[currentIndex]}
    src={images[currentIndex]}
    initial={{ opacity: 0, x: 100 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -100 }}
    transition={{ duration: 0.6 }}
    className="carousel-image"
  />
</AnimatePresence>

Here’s what each part does:

• initial: Sets the starting position and opacity before the image appears.
• animate: Defines how it enters.
• exit: Defines how it leaves when the image changes.
• transition: Controls how long the animation lasts.

Framer Motion handles the hard part—fading and sliding images in and out—making your app feel polished and smooth.