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

  • Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation

    Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation

    Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation

  • Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation

    Feel more human everyday" headline with a "Request demo" button, displayed above a row of rotating image tiles featuring modern objects like a keyboard, car, and vinyl player

    Circular Website Intro Scroll Animation in Framer

    Animation