Back to Dictionary
Action Feedback
●●○Customize
Like / Heart Animation
An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.
Live Demo
What It Is
An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.
✓When to Use
- Social feeds
- Favoriting items in e-commerce
- Commenting systems
✕When NOT to Use
- Corporate or highly formal enterprise software
- Utility toggles
Configuration Tips
- 01Use a multi-step keyframe: scale back slightly, scale up past 100%, then snap to 100%
- 02Change color from gray outline to solid brand color (e.g., Red or Pink)
You've Seen It In
Twitter/XInstagramTikTok
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a heart icon button that does a little bouncy scale animation when clicked and turns red.
Code Example (Tailwind CSS)
export function LikeHeartAnimationDemo() {}