Unusual Image Cycle Component in Framer

Copy component

Unusual Image Cycle Component in Framer

Copy component

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

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.

image of Nandi Muzsik
image of Prianca S.

Created by

Unusual Image Cycle Component in Framer
Unusual Image Cycle Component in Framer
Unusual Image Cycle Component in Framer

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.

component variants in Framer

The multiple variants of the image cycle component.

component variants in Framer

The multiple variants of the image cycle component.

component variants in Framer

The multiple variants of the image cycle component.

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

  • Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

    Interactive Wave Background component with wavy black and white lines

    Interactive Wave Background in Framer

    Component

  • A 3D flip card with a running athlete, a top label, and large text reading ‘Live Without Limits.’

    3D Flipping Project Card Animation in Framer

    Component

    A 3D flip card with a running athlete, a top label, and large text reading ‘Live Without Limits.’

    3D Flipping Project Card Animation in Framer

    Component

    A 3D flip card with a running athlete, a top label, and large text reading ‘Live Without Limits.’

    3D Flipping Project Card Animation in Framer

    Component