Timeline

1. Example & HTML Structure

Interactive timeline title lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

2022

January 2025

Title text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut leo rutrum, consectetur dui ac, aliquet lectus. Phasellus et risus consectetur, vestibulum justo at, blandit orci. Aliquam ac luctus ligula, sed lacinia quam.

Link

2021

January 2021

Title text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut leo rutrum, consectetur dui ac, aliquet lectus. Phasellus et risus consectetur, vestibulum justo at, blandit orci. Aliquam ac luctus ligula, sed lacinia quam.

Link

January 2021

Title text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut leo rutrum, consectetur dui ac, aliquet lectus. Phasellus et risus consectetur, vestibulum justo at, blandit orci. Aliquam ac luctus ligula, sed lacinia quam.

Link

January 2021

Title text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut leo rutrum, consectetur dui ac, aliquet lectus. Phasellus et risus consectetur, vestibulum justo at, blandit orci. Aliquam ac luctus ligula, sed lacinia quam.

Link

2020

January 2025

Title text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut leo rutrum, consectetur dui ac, aliquet lectus. Phasellus et risus consectetur, vestibulum justo at, blandit orci. Aliquam ac luctus ligula, sed lacinia quam.

Link

The following example shows the basic structure of the Timeline component:

<div class="bt1d-timeline">
  <h2 class="bt1d-timeline__title">Title</h2>
  <p class="bt1d-timeline__description">Qui et nulla elit et non veniam.</p>

  <div class="bt1d-timeline__entries">

    <!-- Start Year Entry -->
    <div class="bt1d-timeline-year">
      <h3 class="bt1d-timeline-year__year">2024</h3>

      <div class="bt1d-timeline-year__list">

        <!-- Start Event Entry -->
        <div class="bt1d-timeline-event">
          <figure class="bt1d-timeline-event__figure">
            <img src="http://placehold.co/600x300" alt="Placeholder" class="bt1d-timeline-event__img">
          </figure>
          <div class="bt1d-timeline-event__content">
            <span class="bt1d-timeline-event__byline">Byline</span>
            <h4 class="bt1d-timeline-event__title">Title</h4>
            <p class="bt1d-timeline-event__description">Aliquip tempor occaecat amet voluptate esse minim anim deserunt reprehenderit aute quis.</p>
            <a href="#" class="bt1d-timeline-event__link">Read More</a>
            <span class="bt1d-timeline-event__dot"></span>
          </div>
        </div> <!-- End Event Entry -->

        <!-- Add more events for this year -->

      </div>
    </div> <!-- End Year Entry -->

    <!-- Add more years -->

  </div>
</div>

2. Key Classes

• bt1d-timeline: The main wrapper for the entire timeline component.
• bt1d-timeline__title: The title of the timeline.
• bt1d-timeline__description: A brief description of the timeline’s purpose or content.
• bt1d-timeline__entries: The container for all the timeline entries.
• bt1d-timeline-year: The wrapper for each year in the timeline.
• bt1d-timeline-year__year: Displays the year label.
• bt1d-timeline-year__list: Contains the list of events for a specific year.
• bt1d-timeline-event: The wrapper for each individual event entry.
• bt1d-timeline-event__figure: Wraps the event image. (optional)
• bt1d-timeline-event__img: The image associated with an event.
• bt1d-timeline-event__content: Contains the text content for an event, including byline, title, description, and links.
• bt1d-timeline-event__byline: Displays the byline for the event. (optional)
• bt1d-timeline-event__title: The title of the event.
• bt1d-timeline-event__description: A brief description of the event.
• bt1d-timeline-event__link: The link for more details about the event. (optional)
• bt1d-timeline-event__dot: A visual indicator marking the event’s position on the timeline.

3. Customization with Motion Utilities

The Interactive Timeline component can be enhanced with motion utilities to add dynamic animations to individual elements. Motion effects are applied using the motion class, with the direction of the effect specified by the data-motion-direction attribute. Additionally, you can control the animation timing using the optional data-motion-delay attribute.

The motion utilities leverage an intersection observer to trigger animations when at least 50% of the element is inside the viewport. If a data-motion-delay is specified, the animation will consider this delay before starting. For enhanced accessibility, the motion utilities respect reduced motion preferences, ensuring a smoother experience for users who have opted out of animations in their system settings.

Example with Motion Utilities:

<div class="bt1d-timeline-event motion" data-motion-direction="right" data-motion-delay="500">
  <!-- The rest of the event markup -->
</div>

Key Motion Utilities:

• motion Class: Enables animations on specific elements within the timeline.
• data-motion-direction Attribute: Defines the direction of the motion effect. Supported values:
  • up: Slide/fade in from below.
  • down: Slide/fade in from above.
  • left: Slide/fade in from the left.
  • right: Slide/fade in from the right.
• data-motion-delay Attribute (Optional): Specifies the delay before the motion effect starts. Uses numerical values to define the delay in milliseconds, whe
  • 500 equals 0.5 seconds.
  • 1000 equals 1 second.
  • If omitted, the animation begins immediately.
• Intersection Observer Trigger: The animation is triggered when at least 50% of the element is visible within the viewport.
• Reduced Motion Support: The motion utilities respect users’ reduced motion preferences, ensuring animations are minimized or disabled for accessibility.