Article Categories

Selected Reading

Double Click Heart Animation in HTML CSS & JavaScript

Javascript CSS HTML

The double-click heart animation is a popular interactive effect commonly seen on social media platforms. This article demonstrates how to create this engaging animation using HTML, CSS, and JavaScript, where users can double-click anywhere on a container to display an animated heart at that specific position.

Syntax

/* CSS Animation Syntax */
@keyframes animation-name {
    0% { /* initial state */ }
    50% { /* middle state */ }
    100% { /* final state */ }
}

.element {
    animation: animation-name duration timing-function;
}

Prerequisites

For this project, you only need basic knowledge of

HTML for structuring elements
CSS for styling and animations
JavaScript to add interactivity

HTML Structure

We'll create a simple HTML structure that includes a container for the animation and a heart icon placeholder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Click For Heart</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <i class="fa-solid fa-heart heart"></i>
    </div>
</body>
</html>

CSS Animation

The CSS creates the visual styling and keyframe animation for the heart effect. The animation scales the heart and controls its opacity to create a smooth appearing and disappearing effect.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7fb;
}

.container {
    position: relative;
    height: 420px;
    width: 320px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.heart {
    position: absolute;
    color: red;
    font-size: 40px;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.heart.active {
    animation: heartPop 0.8s ease-out forwards;
}

@keyframes heartPop {
    0% {
        font-size: 0px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    30% {
        font-size: 80px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    50% {
        font-size: 60px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        font-size: 60px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

JavaScript Interactivity

The JavaScript handles the double-click event, calculates the click position, and triggers the heart animation at that specific location.

const container = document.querySelector(".container");
const heart = document.querySelector(".heart");

container.addEventListener("dblclick", (e) => {
    // Calculate click position relative to container
    let xValue = e.clientX - e.target.offsetLeft;
    let yValue = e.clientY - e.target.offsetTop;
    
    // Position the heart at click location
    heart.style.left = `${xValue}px`;
    heart.style.top = `${yValue}px`;
    
    // Trigger animation
    heart.classList.add("active");
    
    // Remove animation class after completion
    setTimeout(() => {
        heart.classList.remove("active");
    }, 800);
});

Complete Example

Here's the complete working code combining HTML, CSS, and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Click Heart Animation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }
        
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f6f7fb;
        }
        
        .container {
            position: relative;
            height: 420px;
            width: 320px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            text-align: center;
        }
        
        .container::before {
            content: "Double-click anywhere!";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .heart {
            position: absolute;
            color: #ff1744;
            font-size: 40px;
            opacity: 0;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        
        .heart.active {
            animation: heartPop 0.8s ease-out forwards;
        }
        
        @keyframes heartPop {
            0% {
                font-size: 0px;
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            30% {
                font-size: 80px;
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
            50% {
                font-size: 60px;
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                font-size: 60px;
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <i class="fa-solid fa-heart heart"></i>
    </div>
    
    <script>
        const container = document.querySelector(".container");
        const heart = document.querySelector(".heart");
        
        container.addEventListener("dblclick", (e) => {
            // Calculate click position relative to container
            let xValue = e.clientX - e.target.offsetLeft;
            let yValue = e.clientY - e.target.offsetTop;
            
            // Position the heart at click location
            heart.style.left = `${xValue}px`;
            heart.style.top = `${yValue}px`;
            
            // Trigger animation
            heart.classList.add("active");
            
            // Remove animation class after completion
            setTimeout(() => {
                heart.classList.remove("active");
            }, 800);
        });
    </script>
</body>
</html>

A purple gradient container with rounded corners appears in the center of the page with "Double-click anywhere!" text. When you double-click on the container, a red heart icon appears at the click position, scales up with animation, and then fades out smoothly.

Conclusion

This double-click heart animation combines CSS keyframes for smooth scaling effects with JavaScript event handling for interactive positioning. The effect creates an engaging user experience similar to popular social media platforms and can be easily customized with different colors, sizes, or animation timings.

Pankaj Kumar Bind

Updated on: 2026-03-15T18:17:50+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next