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.
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.
The masking technique used on the carousel.
The masking technique used on the carousel.
The masking technique used on the carousel.
