Component
Tickets Viewer Carousel in Framer
Created by
About the resource
To create this carousel, I began by building a customizable ticket component and a ticket viewer component with four variants. Then, I created four wrapper frames, each corresponding to an active ticket. The ticket component is placed inside these wrapper frames with an absolute position. In each variant, the active wrapper frame is set to relative position, while the inactive frames are absolutely positioned, rotated 90°, and have their origin set to 50% on the X-axis and 80% on the Y-axis. These rotated frames start with an opacity of 0, which changes to 1 when they become active. The ticket frames that move left are slightly blurred, and this layer has a transition override with a small delay.
I then added click interactions to the ticket component in the first four variants, and in the final variant, I included an appear interaction that brings the carousel back to the primary variant, creating a continuous loop.
About the resource
To create this carousel, I began by building a customizable ticket component and a ticket viewer component with four variants. Then, I created four wrapper frames, each corresponding to an active ticket. The ticket component is placed inside these wrapper frames with an absolute position. In each variant, the active wrapper frame is set to relative position, while the inactive frames are absolutely positioned, rotated 90°, and have their origin set to 50% on the X-axis and 80% on the Y-axis. These rotated frames start with an opacity of 0, which changes to 1 when they become active. The ticket frames that move left are slightly blurred, and this layer has a transition override with a small delay.
I then added click interactions to the ticket component in the first four variants, and in the final variant, I included an appear interaction that brings the carousel back to the primary variant, creating a continuous loop.
About the resource
To create this carousel, I began by building a customizable ticket component and a ticket viewer component with four variants. Then, I created four wrapper frames, each corresponding to an active ticket. The ticket component is placed inside these wrapper frames with an absolute position. In each variant, the active wrapper frame is set to relative position, while the inactive frames are absolutely positioned, rotated 90°, and have their origin set to 50% on the X-axis and 80% on the Y-axis. These rotated frames start with an opacity of 0, which changes to 1 when they become active. The ticket frames that move left are slightly blurred, and this layer has a transition override with a small delay.
I then added click interactions to the ticket component in the first four variants, and in the final variant, I included an appear interaction that brings the carousel back to the primary variant, creating a continuous loop.
The five variants of the ticket viewer component in Framer.
The five variants of the ticket viewer component in Framer.
The five variants of the ticket viewer component in Framer.
