Table of Contents

• What Is a Framer Motion Carousel?
• 1. Infinite Image Scroll Carousel
• 2. Logo Marquee Carousel
• 3. Multi-Column Vertical Ticker
• 4. Spring-Physics Slider Carousel
• 5. 3D Revolving Card Carousel
• Comparison Table
• When to Use Each Framer Motion Carousel Pattern
• FAQ

What Is a Framer Motion Carousel?

A framer motion carousel is a UI component that cycles through a set of items — images, cards, logos, or testimonials — using Framer Motion as the animation engine. Unlike traditional CSS-only carousels or heavyweight libraries like Swiper (which bundles 130 KB+ minified), a framer motion carousel leverages React's component model and Framer Motion's declarative animate, transition, and variants props to deliver hardware-accelerated, 60 fps animations with full developer control.

According to NPM Trends, Framer Motion (now published as motion) consistently receives over 3.5 million weekly downloads, making it the most popular React animation library by a significant margin. This adoption is driven by its intuitive API: you replace <div> with <motion.div>, pass an animate prop, and Framer Motion handles interpolation, spring physics, and GPU-optimized transforms automatically.

In this guide, we'll walk through the 5 best framer motion carousel patterns you can use in production React and Next.js applications. Each one is a real, working component from the ogBlocks component library — and you can interact with the live demos directly below.

---

1. Infinite Image Scroll Carousel

The infinite scroll carousel is the most common framer motion carousel pattern. It continuously scrolls a row of images from right to left, creating an endlessly looping marquee effect. This is the pattern you see on portfolio sites, agency landing pages, and image galleries.

How It Works

The trick is straightforward: duplicate the entire image array, place both copies side-by-side in a flex container, then animate the container's position from 0% to -50%. Because the second copy is an exact mirror of the first, the loop appears seamless when Framer Motion's infinite repeat kicks in. This approach ensures that as the first set of images scrolls out of view, the identical second set is right behind it.

Key Framer Motion APIs Used

• animate with percentage-based x values for seamless looping
• transition repeat: Infinity for continuous playback
• variants with whileHover for interactive tilt and scale on each card
• motion.p with animated y for hover-reveal title labels

Live Demo

Each image card in this framer motion carousel has a slight rotation (2deg / -2deg) that straightens on hover, paired with a title label that slides up — a small detail that dramatically improves perceived interactivity.

---

2. Logo Marquee Carousel

The logo marquee is a specialized framer motion carousel designed for "trusted by" or "our partners" sections. It scrolls brand logos horizontally with gradient edge fading — a polished look used by companies like Vercel, Linear, and Stripe.

How It Works

The animation logic relies on duplicating items and translating the container across the x-axis. To achieve the signature look, the design is optimized with CSS linear gradients on both edges. Two absolute-positioned overlays with right and left fades create a "mask" effect, making brand logos appear to emerge from and disappear into the background darkness.

Key Framer Motion APIs Used

• animate with x for horizontal translation
• CSS gradient overlays (not Framer Motion, but essential to the pattern)
• filter: invert grayscale to normalize multi-colored brand logos into a monochrome palette

Live Demo

Pro tip: Using grayscale and opacity-50 on logos keeps the section visually quiet so it doesn't compete with your hero section above. This is a design pattern borrowed from enterprise SaaS landing pages.

---

3. Multi-Column Vertical Ticker Carousel

This is a unique framer motion carousel that scrolls content vertically in multiple synchronized columns. Instead of the typical horizontal swipe, items slide up and out of view in a staggered, choreographed sequence — perfect for showcasing client logos, tech stack icons, or partner badges in a compact space.

How It Works

This carousel uses useAnimate — Framer Motion's imperative animation hook — to orchestrate a multi-step animation sequence. Each column runs an independent async loop: one item slides out to the right, the next item slides up into view, pauses for a set duration, then the cycle repeats. When all items have cycled, the positions reset instantly to create a seamless loop.

Key Framer Motion APIs Used

• useAnimate for imperative, sequenced animations
• easeInOut and easeOut easing functions for natural motion
• Manual async loop with await for precise choreography

Live Demo

---

4. Spring-Physics Slider Carousel

This framer motion carousel uses Framer Motion's spring physics engine for navigation — forward/back arrows snap to each slide with a natural, bouncy feel instead of rigid linear easing. The active slide sits front-and-center at full scale, while inactive slides rotate, shrink, and blur into the background.

How It Works

The core animation maps the current index to a precise horizontal offset. Using a spring transition type with carefully tuned stiffness and damping values gives each slide transition a snappy, physical feel. Inactive slides are dynamically styled with rotation and scaling transforms, paired with a blur effect to create a sense of depth and focus on the active slide.

Key Framer Motion APIs Used

• type: "spring" with stiffness and damping for physics-based transitions
• whileHover with conditional logic (only the active slide scales)
• whileTap on navigation buttons for micro-interaction feedback
• Responsive slideWidth calculated from window.innerWidth

Live Demo

Spring animations are what separate amateur carousels from production-grade ones. Linear easing feels robotic. A spring with stiffness: 250 and damping: 30 mimics real-world inertia — the slide accelerates, overshoots slightly, and settles. This is how Apple's iOS carousel animations work under the hood.

---

5. 3D Revolving Card Carousel

This is the most advanced framer motion carousel in this collection. Cards are arranged in a true 3D circular formation using trigonometric positioning (Math.cos and Math.sin), and the entire ring rotates continuously in 3D space. Cards at the "front" are larger, and cards at the "back" shrink — creating genuine depth perception with CSS perspective.

How It Works

Each card's position is dynamically calculated using its angular offset on a virtual circle. By transforming the shared rotation angle into spatial coordinates (x and z), the ring of cards can rotate continuously while maintaining its 3D depth.

The angle motion value is animated from 0 to 360 with repeat: Infinity, and each card transforms its x, z, rotateY, scale, and zIndex reactively using useTransform. The radius is dynamically calculated based on card count and viewport width to prevent overlap.

Key Framer Motion APIs Used

• useMotionValue for the shared rotation angle
• useTransform for derived x, z, rotateY, scale, and zIndex
• animate() imperative function for continuous rotation
• CSS perspective: 1400px and transformStyle: preserve-3d for true 3D rendering
• willChange: transform and backfaceVisibility: hidden for GPU acceleration

Live Demo

This carousel demonstrates one of Framer Motion's most powerful features: reactive transforms with useTransform. Instead of recalculating positions on every frame in a useEffect, Framer Motion handles the interpolation natively on the GPU — achieving consistent 60 fps even with 10 simultaneous cards.

---

Comparison Table

Carousel Type	Navigation	Best For	Key API	Complexity
Infinite Scroll	Auto (continuous)	Image galleries, portfolios	animate x + repeat	⭐ Low
Logo Marquee	Auto (continuous)	Trust badges, partner logos	animate x + gradients	⭐ Low
Vertical Ticker	Auto (sequenced)	Compact logo displays	useAnimate + async	⭐⭐ Medium
Spring Slider	Manual (arrows)	Hero sections, featured content	spring + stiffness	⭐⭐ Medium
3D Revolving	Auto (3D rotation)	Showcases, premium displays	useMotionValue + useTransform	⭐⭐⭐ High

When to Use Each Framer Motion Carousel Pattern

Choosing the right framer motion carousel depends on your content type and user interaction model:

• Infinite Scroll — Use when you have 5+ images and want a passive, ambient showcase. Works best as a section separator or a visual accent that doesn't require user interaction.
• Logo Marquee — The industry standard for "trusted by" sections. Use the gradient-fade variant for dark backgrounds and keep logos monochrome to avoid visual noise.
• Vertical Ticker — Use when horizontal space is limited (e.g., mobile-first layouts or sidebar widgets). The multi-column variant is excellent for dense information displays.
• Spring Slider — Use for hero carousels or featured content where users need manual control. Spring physics makes it feel premium and responsive.
• 3D Revolving — Use sparingly for high-impact sections. Great for product showcases, team member displays, or landing page hero elements where visual wow-factor justifies the extra rendering cost.

All five patterns are available as copy-paste React components in the ogBlocks carousel collection. Each comes in both JSX and TypeScript, is fully responsive, and requires only React and Framer Motion as dependencies. To learn more about building with these tools, check our guide on Framer Motion and Next.js.

---

FAQ

What is a framer motion carousel?

A framer motion carousel is a React component that cycles through content (images, cards, logos) using Framer Motion's animation library instead of CSS keyframes or third-party slider plugins. It uses declarative props like animate, transition, and variants on motion.div elements to create smooth, GPU-accelerated sliding, fading, or rotating transitions.

How do I make an infinite loop carousel with Framer Motion?

Duplicate your item array, render both copies in a flex container, then animate the container's x property from "0%" to "-50%" with repeat: Infinity and ease: "linear". Because the second half is a mirror of the first, the transition from end to start is visually seamless.

Is Framer Motion better than Swiper for carousels?

It depends on your needs. Swiper provides a feature-complete, plug-and-play carousel with pagination, lazy loading, and accessibility built in. Framer Motion gives you lower-level control over animation physics, custom transitions, and tight React integration — but you build the carousel logic yourself. For React/Next.js projects where animations are a core differentiator, Framer Motion is typically the better choice.

Can I use these carousels in Next.js?

Yes. All carousels shown above use the "use client" directive and are fully compatible with Next.js App Router. Framer Motion works seamlessly with both server and client components — just ensure your carousel component is marked as a client component since it relies on browser APIs and state.

Do framer motion carousels hurt performance?

No, when implemented correctly. Framer Motion animates using CSS transforms (translateX, scale, rotate) which are GPU-composited and don't trigger layout reflows. All five carousels above use will-change: transform and backface-visibility: hidden where appropriate, ensuring smooth 60 fps animation even on mid-range mobile devices.