📅 Timeline Component
Display events and milestones in an animated chronological timeline. Features smooth anime.js animations, vertical and horizontal layouts, and progress tracking.
Vertical Alternating
The default layout with events alternating between left and right sides. Great for project timelines, roadmaps, and history pages.
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Beta Launch
Public beta opened to early adopters. Implemented feedback from alpha testing phase.
Version 1.0 Release
Official public launch. All planned features complete, documentation finalised.
Feature Update 1.1
First major update with user-requested features and performance improvements.
View Code Example
<script>
import Timeline from '$lib/components/Timeline.svelte';
const events = [
{
id: 1,
date: '2024-01-15',
title: 'Project Kickoff',
description: 'Initial planning meeting...',
icon: '🚀',
color: '#3b82f6',
completed: true
},
// ... more events
];
</script>
<Timeline
events={events}
orientation="vertical"
alignment="alternate"
/>Vertical Left Aligned
All events aligned to the left side of the timeline. Simpler layout that works well for narrower containers.
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Beta Launch
Public beta opened to early adopters. Implemented feedback from alpha testing phase.
View Code Example
<Timeline
events={events}
orientation="vertical"
alignment="left"
animation="fade"
/>Company History
A longer timeline showing company milestones with progress tracking enabled. Completed events show a checkmark and the progress line fills in.
Company Founded
Started in a small garage with a big vision. Two co-founders, one laptop.
Seed Funding
Raised £500K seed round from angel investors. Moved to our first office.
Team Grows to 10
Hired our first engineers and designers. Culture and values established.
Product Launch
Launched our flagship product to market. First paying customers onboarded.
Series A
Raised £5M Series A to accelerate growth. Expanded to new markets.
50 Team Members
Growing team across engineering, sales, and customer success.
International Expansion
Opened offices in New York and Berlin. Now serving customers globally.
The Future
Continuing to innovate and grow. Exciting things on the horizon.
View Code Example
<Timeline
events={companyMilestones}
showProgress={true}
animation="slide"
/>Horizontal Layout
Events arranged horizontally with the timeline at the top. Scrollable on smaller screens. Good for process flows or short event sequences.
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Beta Launch
Public beta opened to early adopters. Implemented feedback from alpha testing phase.
Version 1.0 Release
Official public launch. All planned features complete, documentation finalised.
View Code Example
<Timeline
events={events}
orientation="horizontal"
animation="scale"
/>Interactive Events
Add click handlers to make events interactive. Perfect for revealing more details or navigating to related content.
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Beta Launch
Public beta opened to early adopters. Implemented feedback from alpha testing phase.
Version 1.0 Release
Official public launch. All planned features complete, documentation finalised.
Feature Update 1.1
First major update with user-requested features and performance improvements.
View Code Example
<script>
function handleEventClick(event) {
console.log('Clicked:', event.title);
// Navigate, open modal, etc.
}
</script>
<Timeline
events={events}
onEventClick={handleEventClick}
/>Animation Styles
Choose from different entrance animations powered by anime.js. All animations respect the user's reduced motion preferences.
Slide (Default)
Items slide in from the sides
animation="slide"Fade
Simple opacity transition
animation="fade"Scale
Items scale up from smaller size
animation="scale"None
No entrance animation
animation="none"View Code Example
<!-- Slide animation (default) -->
<Timeline events={events} animation="slide" />
<!-- Fade animation -->
<Timeline events={events} animation="fade" />
<!-- Scale animation -->
<Timeline events={events} animation="scale" />
<!-- Custom timing -->
<Timeline
events={events}
animation="slide"
animationDuration={800}
animationDelay={150}
/>Custom Colours
Customise the line colour, default marker colour, or set individual event colours for visual categorisation.
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Beta Launch
Public beta opened to early adopters. Implemented feedback from alpha testing phase.
View Code Example
<!-- Custom line and marker colours -->
<Timeline
events={events}
lineColor="#cbd5e1"
markerColor="#8b5cf6"
/>
<!-- Individual event colours (set in event data) -->
const events = [
{ id: 1, title: 'Design', color: '#8b5cf6', ... },
{ id: 2, title: 'Development', color: '#10b981', ... },
{ id: 3, title: 'Launch', color: '#ef4444', ... },
];Date Formatting
Use relative dates ("2 days ago"), provide a custom formatter function, or use the default format.
Relative Dates
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
Custom Format
Project Kickoff
Initial planning meeting with stakeholders. Defined project scope, timeline, and key milestones.
Design Phase Complete
Finished wireframes, user flows, and high-fidelity mockups. Design system established.
Alpha Release
Internal testing version deployed. Core features functional, gathering initial feedback.
View Code Example
<!-- Relative dates -->
<Timeline events={events} dateFormat="relative" />
<!-- Custom formatter -->
<script>
function formatDateShort(date) {
return date.toLocaleDateString('en-GB', {
month: 'short',
year: 'numeric'
});
}
</script>
<Timeline events={events} dateFormat={formatDateShort} />Component Features
Anime.js Animations
Smooth, staggered entrance animations with multiple preset styles.
Multiple Layouts
Vertical with alternating/fixed alignment, or horizontal scrolling.
Progress Tracking
Visual indicator showing completed vs. pending milestones.
Custom Styling
Customisable colours for lines, markers, and individual events.
Interactive
Click handlers and keyboard navigation for event interactions.
Accessible
Proper ARIA attributes and reduced motion support.
Quick Start Guide
Install anime.js
Run bun add animejs to install the animation library dependency.
Copy the Component
Copy Timeline.svelte from src/lib/components/ to your project.
Add Your Events
Create an array of timeline events with id, date, title, and optional description, icon, and colour.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
events | TimelineEvent[] | required | Array of timeline events |
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction |
alignment | 'left' | 'right' | 'alternate' | 'alternate' | Item alignment (vertical only) |
animation | 'fade' | 'slide' | 'scale' | 'none' | 'slide' | Entrance animation style |
animationDuration | number | 600 | Animation duration in ms |
animationDelay | number | 100 | Delay between item animations |
lineColor | string | '#e2e8f0' | Connecting line colour |
markerColor | string | '#146ef5' | Default marker colour |
showProgress | boolean | false | Show progress for completed events |
dateFormat | function | 'relative' | undefined | Date formatting function |
onEventClick | (event) => void | undefined | Click handler for events |
Event Data Structure
| Property | Type | Required | Description |
|---|---|---|---|
id | string | number | Yes | Unique identifier |
date | Date | string | Yes | Event date |
title | string | Yes | Event title/heading |
description | string | No | Longer description text |
icon | string | No | Emoji or icon in marker |
color | string | No | Custom marker colour |
completed | boolean | No | Mark as completed |
href | string | No | Link URL |