If you’re building a portfolio, showcasing your development journey, or just want to experiment with scroll-based animation, this timeline is a perfect mini-project. It reveals steps dynamically as you scroll, adding that wow factor to your site — and it’s built using only HTML, CSS, and JavaScript. No external libraries (except Font Awesome and Google Fonts)!
Video Tutorial:
🔧 What You’ll Build
A vertical timeline with left-right staggered cards. Each card contains:
-
An icon
-
A step title
-
A description
-
A scroll animation
Full HTML Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Animate On Scroll</title> <!-- Font Awesome CDN--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" /> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="hero"> <h1>Your Web Dev Journey</h1> <p>Scroll to see each milestone</p> </div> <div class="timeline"> <div class="timeline-item left"> <div class="content"> <i class="fa-solid fa-code"></i> <h2>Step 1</h2> <p>Learn HTML & CSS basics</p> </div> </div> <div class="timeline-item right"> <div class="content"> <i class="fa-solid fa-laptop-code icon"></i> <h2>Step 2</h2> <p>Practice building layouts</p> </div> </div> <div class="timeline-item left"> <div class="content"> <i class="fas fa-magic icon"></i> <h2>Step 3</h2> <p>Animate with Javascript</p> </div> </div> <div class="timeline-item right"> <div class="content"> <i class="fas fa-rocket icon"></i> <h2>Step 4</h2> <p>Deploy Your Site</p> </div> </div> <div class="timeline-item left"> <div class="content"> <i class="fas fa-database icon"></i> <h2>Step 5</h2> <p>Learn backend & databases</p> </div> </div> <div class="timeline-item right"> <div class="content"> <i class="fas fa-network-wired icon"></i> <h2>Step 6</h2> <p>Understand APIs & integration</p> </div> </div> <div class="timeline-item left"> <div class="content"> <i class="fas fa-bug icon"></i> <h2>Step 7</h2> <p>Test and Debug you code</p> </div> </div> <div class="timeline-item right"> <div class="content"> <i class="fas fa-users icon"></i> <h2>Step 8</h2> <p>Launch & Get user feedback</p> </div> </div> </div> <script src="script.js"></script> </body> </html>CSS Code:
-
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; background-color: #121212; color: #e0e0e0; } .hero { height: 100vh; background-color: #1e1e1e; color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; gap: 10px; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.1rem; opacity: 0.8; } .timeline { position: relative; max-width: 960px; margin: auto; padding: 80px 20px; } .timeline::after { content: ""; position: absolute; width: 4px; background-color: #555555; top: 0; bottom: 0; margin-left: -2px; left: 50%; } .timeline-item { padding: 20px 40px; position: relative; width: 50%; opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; } .timeline-item.left { left: 0; transform: translateX(-40px) translateY(20px); } .timeline-item.right { left: 50%; transform: translateX(40px) translateY(20px); } .timeline-item.show { opacity: 1; transform: translateY(0); } .timeline-item::before { content: ""; position: absolute; width: 20px; height: 20px; background: #00c853; border-radius: 50%; top: 20px; z-index: 1; } .timeline-item.left::before { right: -10px; } .timeline-item.right::before { left: -10px; } .timeline-item .content { padding: 25px; background: #1e1e1e; border-radius: 16px; position: relative; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease-in-out; } .timeline-item .content:hover { transform: translateY(-4px); } .icon { font-size: 30px; color: #00c853; margin-bottom: 10px; display: inline-block; transform: scale(0.8); transition: transform 0.5s ease-in-out 0.3s; } .timeline-item.show .icon { transform: scale(1.3); } h2 { font-size: 1.3rem; margin-bottom: 8px; } p { font-size: 1rem; opacity: 0.9; }Javascript Code:
-
const items = document.querySelectorAll(".timeline-item"); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("show"); } else { entry.target.classList.remove("show"); } }); }, { threshold: 0.3, rootMargin: "0px 0px -100px 0px", } ); items.forEach((item) => observer.observe(item));🎉 Done!
Now open your browser and scroll through the page. You’ll see each timeline card gracefully slide into view and icons gently grow — all triggered by scrolling.
🔄 Customize It!
Here are a few ways to personalize it:
-
🌈 Change colors: adjust the green
#00c853to match your brand -
🖼️ Use different icons from Font Awesome
-
💬 Replace the text with your learning journey, project roadmap, or story8
-
📱 Make it fully responsive with media queries (optional but fun!)
-
