Step-by-step Tutorial on Creating a Scrolling Animated Timeline for Your Website

by

Creating an engaging and interactive timeline on your website can greatly enhance user experience and showcase historical events, project milestones, or product development stages. In this tutorial, we’ll walk through the steps to build a scrolling animated timeline using simple HTML, CSS, and JavaScript, optimized for WordPress Gutenberg blocks.

Step 1: Set Up Your Basic HTML Structure

Start by creating a container element that will hold your timeline. Inside this container, add individual timeline items representing each event or milestone.

<div class="timeline">
  <div class="timeline-item">
    <h3>Event Title 1</h3>
    <p>Description of event 1.</p>
  </div>
  <div class="timeline-item">
    <h3>Event Title 2</h3>
    <p>Description of event 2.</p>
  </div>
  <!-- Add more items as needed -->
</div>

Step 2: Style Your Timeline with CSS

Apply CSS to style the timeline for visual appeal and animations. Use positioning, colors, and transition effects to create a dynamic scrolling experience.

.timeline {
  position: relative;
  padding: 50px 0;
  width: 100%;
  overflow-x: auto;
  display: flex;
  gap: 30px;
}

.timeline-item {
  background-color: #f0f0f0;
  padding: 20px;
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

Step 3: Add Scroll-triggered Animations with JavaScript

Use JavaScript to detect when a timeline item enters the viewport and then add a class to trigger the animation.

window.addEventListener('scroll', () => {
  document.querySelectorAll('.timeline-item').forEach(item => {
    const rect = item.getBoundingClientRect();
    if (rect.top <= window.innerHeight - 50) {
      item.classList.add('visible');
    }
  });
});

Step 4: Embed Everything into Your WordPress Page

Place the HTML code inside a Custom HTML block, add the CSS inside a <style> tag or your theme's stylesheet, and include the JavaScript in a Custom HTML block or your theme's scripts. This setup will create a smooth, scrolling animated timeline that activates as users scroll through your page.

Experiment with different styles and animations to tailor the timeline to your website's design. With these steps, you can develop an interactive feature that enhances storytelling and user engagement.