Skip to main content
Creative Coding Projects

Build a Valentine's Day Memory Timeline with HTML, CSS & JavaScript

Build an interactive relationship memory timeline for Valentine's Day. Scroll through photos, dates, and messages with beautiful animations.

P

Pakua De

Frontend Developer & Creative Coding Lead

Published

Jul 16, 2026

Read Time

13 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

A vertical scrolling timeline of your relationship milestones — first date, first trip, anniversaries — with scroll-triggered reveal animations and a romantic design.

---

📦 Get the Source Code

> ☕ Download on Buy Me a Coffee →

---

🛠️ Timeline Structure

html
123456789101112131415 
<div class="timeline">
    <div class="timeline-item" data-date="Jan 15, 2024">
        <div class="timeline-content">
            <h3>Our First Date ☕</h3>
            <p>That awkward coffee shop meeting that changed everything...</p>
        </div>
    </div>
    <div class="timeline-item" data-date="Feb 14, 2024">
        <div class="timeline-content">
            <h3>First Valentine&#039;s Day 💝</h3>
            <p>You surprised me with handwritten letters...</p>
        </div>
    </div>
    <!-- Add more milestones -->
</div>

CSS Timeline Design

css
123456789101112131415161718192021222324252627282930 
.timeline {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Center line */
.timeline::before {
    content: &#039;';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #ff4d6d, transparent);
}

.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
    margin-bottom: 40px;
    padding: 0 30px;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

Scroll-Triggered Reveals

javascript
1234567891011 
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add(&#039;visible&#039;);
        }
    });
}, { threshold: 0.3 });

document.querySelectorAll(&#039;.timeline-item&#039;).forEach(item => {
    observer.observe(item);
});

---

🔗 Related

P

About the Author: Pakua De

Frontend Developer & Creative Coding Lead

Pakua spends most weekends turning odd ideas — bouncing DVD logos, generative art, tiny browser games — into working code. He writes Geeky Script's Creative Coding series, teaching JavaScript and CSS through playful, visual projects rather than dry syntax drills.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026