---
title: "TransactionCard — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Cards. Animated card insert ATM hover effect"
canonical: "https://framer.elliotli.dev/component/transactioncard"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/TransactionCard

# TransactionCard

Animated card insert ATM hover effect

[View on Framer](https://framer.com/marketplace/components/transactioncard/?via=elliot-li)

![TransactionCard preview image 1](https://framer.elliotli.dev/og/component/transactioncard/d26c0ef630043d96/1600x1200.jpg)

## Summary

Animated card insert ATM hover effect

## Description

An animated credit card insertion micro-interaction. On hover the container shrinks, the card slides up, rotates 90° into the ATM terminal slot, and a dollar sign fades in on the screen. Built for payment interfaces, checkout flows, banking dashboards, and fintech UI elements that need a delightful interactive touch.

## Features

-   Choreographed hover animation sequence
    
-   Container shrinks from 460px to 220px on hover with 1.03x scale
    
-   Card slides up 70px and rotates 90° simulating card insertion
    
-   ATM terminal slides up to receive the card
    
-   Dollar sign fades in after 1 second delay
    
-   Right side background shifts to light gray on hover
    
-   Customizable transaction label text
    
-   11 independently customizable color controls
    
-   Full typography controls — size, weight, letter spacing, line height
    
-   GPU-accelerated CSS transform animations
    
-   No dependencies
    

## Animation Timing

-   Container shrink — 0.3s ease-in-out
    
-   Card slide and rotate — 1.2s cubic-bezier easing
    
-   Terminal slide — 1.0s cubic-bezier easing
    
-   Dollar sign fade — 0.3s with 1s delay
    

## Property Controls

**Content** — transaction label text

**Colors**

-   Background · Left side · Text color · Arrow color
    
-   Card color · Card magnetic stripe · Card chip buttons
    
-   Terminal body · Screen color · Dollar sign color
    

**Typography** — font family, size, weight, letter spacing, line height

## Technical Details

-   React useState for hover state tracking
    
-   CSS style tag animations for GPU-accelerated performance
    
-   Transform properties — translate and rotate for card and terminal
    
-   Minimal re-renders — only on hover state change
    
-   Fixed 460px default width · 220px hover width · 120px height
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i3b5zeyv-YSgRVBztAP5QiMvE46CsKiw8qn5KLI)

## Use Cases

Payment interfaces · Checkout buttons · Banking dashboards · Transaction history items · Wallet app UI · E-commerce checkout flows · Fintech micro-interactions · Financial app prototypes

**SEO Keywords**

framer transaction card · framer payment animation · framer card animation · framer fintech component · framer hover animation · framer payment UI · framer card insert · framer micro interaction · framer banking component · framer checkout UI · framer animated button · framer payment component · framer interactive card · framer code component · framer finance UI

## Rank history [How rankings work →](/terms#rankings)

-   All · #5840

## Details

- **Author**: Hamim Reza
- **Published**: 2026-05-04
- **Updated**: 2026-05-04
- **Added**: 2026-04-07
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards