using for the upcoming event.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo.
1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo.
2
Currently, the component looks like this:
When designing an interactive timeline, you can choose a vertical or horizontal style. A vertical timeline is easy to use, especially on phones, because this is the typical web scrolling direction. If the timeline has a lot of content, this may be the most convenient layout.
However, horizontal timelines are more eye-catching on wide screens and are a great choice for creative pages with less detail that can be scrolled in turn. Each style has its own characteristics, suitable for different web types and user experiences.
You have three types of visual elements to style your timeline: line, node, and date stamp.
.Timeline__content::after { background-color: var(--clr-purple); content: ""; position: absolute; left: calc(50% - 2px); width: 0.4rem; height: 97%; z-index: -5; }
.circle { position: absolute; background: var(--clr-purple); top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 6.8rem; width: 100%; aspect-ratio: 1/ 1; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 3; font-size: 1.6rem; }
Date markers: Dates, styled with the Timeline__date class, appear on either side of the timeline. Their position alternates between left and right for each timeline item, creating a balanced, staggered image along the timeline.
.Timeline__text, .Timeline__date { width: 50%; } .Timeline__item:nth-child(even) { flex-direction: row-reverse;} .Timeline_item:nth-child(even) .Timeline_date { text-align: right; padding-right: 8.3rem; } .Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;} .Timeline_item:nth-child(odd) .Timeline_text { text-align: right; align-items: flex-end; padding-right: 8.3rem; } .Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}
Once styled, your component will look like this:
To animate this element, use the Intersection Observer API to animate timeline items as they scroll. Add the following code to script.js.
First, select the entire element using the Timeline_item class.
const timelineItems = document.querySelectorAll(".Timeline__item");
Set each item's initial opacity to 0 (invisible) and apply a CSS transition to create a smooth blur effect.
timelineItems.forEach((item) => { item.style.opacity = 0; item.style.transition = "opacity 0.6s ease-out"; }
Define a function fadeInOnScroll to change the opacity of items to 1 (visible) when they intersect the viewport.
const fadeInOnScroll = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } }); };
Set choices for the observer, with a threshold of 0.1 indicating that the animation will trigger when 10% of the items are visible.
const options = { root: null, rootMargin: "0px", threshold: 0.1, }
Finish by creating an IntersectionObserver with these options and applying it to each timeline item.
const observer = new IntersectionObserver(fadeInOnScroll, options); timelineItems.forEach((item) => { observer.observe(item); });
Building an interactive timeline not only presents information but also creates a more engaging experience for the web. By combining HTML structure, CSS styling, and JavaScript animations, you can do it with ease. Good luck!