Component
Unusual Image Cycle Component in Framer
This is an unusual image cycle animation recreated in Framer, from Caramba agency’s work. You can remix the project to explore how it’s built and adjust the animation to fit your own style.
Created by
About the resource
To create this image cycle animation, I started by adding all the images and placing them inside a masking frame. Each image is pinned to the side it enters from. The masking frame basically hides and reveals the image by changing its size from zero to full width. In the default variant, all the images are pinned to both sides.
In the first variant, the mask expands to show the full image, and the image itself is pinned to the opposite side. On the next variant, the mask switches sides, this makes it look like the image slides in from one end and exits from the other, almost like it’s opening and closing.
I repeated this setup for all four images using the same structure. Finally, I added appear interactions with ease-in and ease-out transitions between all the variants and timed them so the images shift smoothly in a continuous flow.
About the resource
To create this image cycle animation, I started by adding all the images and placing them inside a masking frame. Each image is pinned to the side it enters from. The masking frame basically hides and reveals the image by changing its size from zero to full width. In the default variant, all the images are pinned to both sides.
In the first variant, the mask expands to show the full image, and the image itself is pinned to the opposite side. On the next variant, the mask switches sides, this makes it look like the image slides in from one end and exits from the other, almost like it’s opening and closing.
I repeated this setup for all four images using the same structure. Finally, I added appear interactions with ease-in and ease-out transitions between all the variants and timed them so the images shift smoothly in a continuous flow.
About the resource
To create this image cycle animation, I started by adding all the images and placing them inside a masking frame. Each image is pinned to the side it enters from. The masking frame basically hides and reveals the image by changing its size from zero to full width. In the default variant, all the images are pinned to both sides.
In the first variant, the mask expands to show the full image, and the image itself is pinned to the opposite side. On the next variant, the mask switches sides, this makes it look like the image slides in from one end and exits from the other, almost like it’s opening and closing.
I repeated this setup for all four images using the same structure. Finally, I added appear interactions with ease-in and ease-out transitions between all the variants and timed them so the images shift smoothly in a continuous flow.
The multiple variants of the image cycle component.
The multiple variants of the image cycle component.
The multiple variants of the image cycle component.
