Animated Resume/CV Template

A standard resume is boring. Let’s create a timeline design where jobs slide into view as the user scrolls down the page!

IntersectionObserver Logic

We observe .timeline-item classes. When they enter the viewport, we add a .show class to trigger the CSS transition.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
});

const hiddenElements = document.querySelectorAll('.timeline-item');
hiddenElements.forEach((el) => observer.observe(el));

.timeline-item {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s;
}
.timeline-item.show {
  opacity: 1;
  transform: translateX(0);
}

Scroll down in the Live Demo to see the timeline items fade in seamlessly.