Component
Digital Receipt Interaction in Framer
This is a Framer recreation of Kumail’s digital receipt animation. Made with nested components, click events, and smart use of variants. Remix the project to explore how to build clean, interactive sequences like this in Framer.
About the resource
To create this digital receipt animation, I first built a item component with two states: open and closed. Then, in the main digital receipt component, I added four of these cards inside a container.
Each transaction item has four open state variants and four receipt view variants to show different parts of the animation. To control the animation from outside the component, I exposed an event from the button inside each card. This lets me connect interactions directly from the component.
For the final reset, I added a large transparent layer on the bottom of everything. Clicking this layer takes you back to the default variant and resets the animation.
About the resource
To create this digital receipt animation, I first built a item component with two states: open and closed. Then, in the main digital receipt component, I added four of these cards inside a container.
Each transaction item has four open state variants and four receipt view variants to show different parts of the animation. To control the animation from outside the component, I exposed an event from the button inside each card. This lets me connect interactions directly from the component.
For the final reset, I added a large transparent layer on the bottom of everything. Clicking this layer takes you back to the default variant and resets the animation.
About the resource
To create this digital receipt animation, I first built a item component with two states: open and closed. Then, in the main digital receipt component, I added four of these cards inside a container.
Each transaction item has four open state variants and four receipt view variants to show different parts of the animation. To control the animation from outside the component, I exposed an event from the button inside each card. This lets me connect interactions directly from the component.
For the final reset, I added a large transparent layer on the bottom of everything. Clicking this layer takes you back to the default variant and resets the animation.
Multiple variants of the digital receipt component in Framer.
Multiple variants of the digital receipt component in Framer.
Multiple variants of the digital receipt component in Framer.
