Image Before After Carousel in Framer

Image Before After Carousel in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

Image Before After Carousel in Framer

This is an image before-after carousel recreated in Framer, from Solt Wagner's work. Feel free to remix the project and see how you can build this cool slideshow animation interaction in Framer without writing any code.

image of Nandi Muzsik
image of Prianca S.
Image of Solt

Created by

,

and

AI image generation UI with prompt-to-visual carousel
AI image generation UI with prompt-to-visual carousel
AI image generation UI with prompt-to-visual carousel

About the resource

To create this before-after carousel animation, I started by building a circular carousel using multiple arms, each rotated to complete the full circle. Then I duplicated the carousel—one styled for the "before" state and the other for "after." The "before" version is relatively positioned, while the "after" sits absolutely on top of it. Both are placed inside a 3D-transformed wrapping frame to keep the spiral structure intact. The main trick is in the masking: each carousel is wrapped inside a frame that's 50% in width and pinned to either the left or right side. This masking makes only half of each version visible, creating a clean before-after split view.

About the resource

To create this before-after carousel animation, I started by building a circular carousel using multiple arms, each rotated to complete the full circle. Then I duplicated the carousel—one styled for the "before" state and the other for "after." The "before" version is relatively positioned, while the "after" sits absolutely on top of it. Both are placed inside a 3D-transformed wrapping frame to keep the spiral structure intact. The main trick is in the masking: each carousel is wrapped inside a frame that's 50% in width and pinned to either the left or right side. This masking makes only half of each version visible, creating a clean before-after split view.

About the resource

To create this before-after carousel animation, I started by building a circular carousel using multiple arms, each rotated to complete the full circle. Then I duplicated the carousel—one styled for the "before" state and the other for "after." The "before" version is relatively positioned, while the "after" sits absolutely on top of it. Both are placed inside a 3D-transformed wrapping frame to keep the spiral structure intact. The main trick is in the masking: each carousel is wrapped inside a frame that's 50% in width and pinned to either the left or right side. This masking makes only half of each version visible, creating a clean before-after split view.

Before-after image carousel with mask settings panel

The masking technique used on the carousel.

Before-after image carousel with mask settings panel

The masking technique used on the carousel.

Before-after image carousel with mask settings panel

The masking technique used on the carousel.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D animated hero section with rotating website previews

    Animated 3D Hero Section in Framer

    Animation

    3D animated hero section with rotating website previews

    Animated 3D Hero Section in Framer

    Animation

    3D animated hero section with rotating website previews

    Animated 3D Hero Section in Framer

    Animation

  • Stacked card UI with sailing article and retro artwork

    Stacking Cards on Scroll in Framer

    Animation

    Stacked card UI with sailing article and retro artwork

    Stacking Cards on Scroll in Framer

    Animation

    Stacked card UI with sailing article and retro artwork

    Stacking Cards on Scroll in Framer

    Animation