Scroll Animations & Polish

Subtle animations make a portfolio feel professional and modern. The key word is subtle.

Intersection Observer API

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add("visible");
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll(".animate").forEach(el => {
    observer.observe(el);
});

CSS fade-in from below

.animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}
.animate.visible {
    opacity: 1;
    transform: translateY(0);
}

Staggered delays

/* Each card appears slightly later than the previous */
.card:nth-child(1) { transition-delay: 0ms; }
.card:nth-child(2) { transition-delay: 100ms; }
.card:nth-child(3) { transition-delay: 200ms; }

Performance tips

• Only animate opacity and transform. They use the GPU
• Never animate width, height, or top/left. They cause reflow
• Use will-change: transform sparingly on animated elements
• Respect prefers-reduced-motion for accessibility