Timeline

Animated timeline with scroll-based reveals

Our Journey

A look at our milestones

🚀

Launch of Components

Introducing our collection of high-quality, animated components.

2024

⚡

Framework Development

Building the foundation for our component library.

2023

🔍

Initial Research

Studying the latest trends in web design and animation.

2022

💡

Project Inception

The beginning of our journey to create components.

2021

Timeline

A stunning animated timeline component with scroll-based reveals and smooth animations. Perfect for showcasing company history, project milestones, or any chronological content with engaging visual storytelling.

Features

Scroll-Based Animation: Elements reveal as you scroll
Smooth Transitions: Fluid animations with Framer Motion
Interactive Elements: Hover effects and click interactions
Customizable: Easy to modify colors, timing, and layout
Responsive: Works perfectly on all screen sizes
Performance Optimized: Efficient scroll handling and rendering

Installation

npm install motion/react lucide-react

Basic Usage

import { Timeline } from "@/components/timeline";

function MyComponent() {
  const timelineEvents = [
    {
      year: "2024",
      title: "Project Launch",
      description: "Successfully launched our flagship product",
      icon: "🚀",
    },
    {
      year: "2023",
      title: "Development Phase",
      description: "Intensive development and testing period",
      icon: "⚡",
    },
  ];

  return <Timeline events={timelineEvents} />;
}

Props

Prop	Type	Default	Description
events	TimelineEvent[]	[]	Array of timeline events
variant	'default' \| 'minimal' \| 'detailed'	'default'	Timeline style variant
orientation	'vertical' \| 'horizontal'	'vertical'	Timeline orientation
className	string	-	Additional CSS classes

TimelineEvent Interface

interface TimelineEvent {
  year: string;
  title: string;
  description: string;
  icon?: string;
  image?: string;
  link?: string;
}

Examples

Basic Timeline

const events = [
  {
    year: "2024",
    title: "Company Founded",
    description: "Started our journey with a vision to innovate",
    icon: "🏢",
  },
  {
    year: "2023",
    title: "First Product",
    description: "Launched our first successful product",
    icon: "🎉",
  },
  {
    year: "2022",
    title: "Team Growth",
    description: "Expanded our team to 50+ members",
    icon: "👥",
  },
];

<Timeline events={events} />;

Detailed Timeline

const detailedEvents = [
  {
    year: "2024",
    title: "Global Expansion",
    description:
      "Expanded operations to 10+ countries with over 1M users worldwide. Launched innovative features that revolutionized the industry.",
    icon: "🌍",
    image: "/images/expansion.jpg",
  },
  {
    year: "2023",
    title: "Series A Funding",
    description:
      "Secured $10M in Series A funding from top-tier investors. This enabled us to scale our operations and hire key talent.",
    icon: "💰",
    image: "/images/funding.jpg",
  },
];

<Timeline events={detailedEvents} variant="detailed" />;

Horizontal Timeline

<Timeline events={events} orientation="horizontal" className="py-20" />

Customization

Custom Styling

<Timeline
  events={events}
  className="bg-gradient-to-br from-neutral-900 to-neutral-800 text-white"
/>

Different Variants

<div className="space-y-20">
  <Timeline events={events} variant="default" />
  <Timeline events={events} variant="minimal" />
  <Timeline events={events} variant="detailed" />
</div>

Custom Event Styling

const customEvents = events.map((event) => ({
  ...event,
  className: "bg-gradient-to-r from-blue-500 to-purple-600 text-white",
}));

<Timeline events={customEvents} />;

Advanced Usage

Interactive Timeline

function InteractiveTimeline() {
  const [selectedEvent, setSelectedEvent] = useState(null);

  return (
    <div>
      <Timeline
        events={events}
        onEventClick={(event) => setSelectedEvent(event)}
      />

      {selectedEvent && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="max-w-md rounded-lg bg-white p-8">
            <h3 className="mb-4 text-2xl font-bold">{selectedEvent.title}</h3>
            <p className="mb-4">{selectedEvent.description}</p>
            <button
              onClick={() => setSelectedEvent(null)}
              className="rounded bg-blue-500 px-4 py-2 text-white"
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Timeline with Images

const eventsWithImages = [
  {
    year: "2024",
    title: "Product Launch",
    description: "Launched our revolutionary product",
    icon: "🚀",
    image: "/images/product-launch.jpg",
  },
  {
    year: "2023",
    title: "Team Building",
    description: "Built an amazing team of professionals",
    icon: "👥",
    image: "/images/team.jpg",
  },
];

<Timeline events={eventsWithImages} variant="detailed" />;

Animated Timeline

import { motion } from "motion/react";

function AnimatedTimeline() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      <Timeline events={events} className="transform-gpu" />
    </motion.div>
  );
}

Best Practices

Clear Content: Use concise, engaging descriptions for each event
Visual Hierarchy: Use icons and images to enhance visual appeal
Performance: Optimize images and animations for better performance
Accessibility: Ensure timeline is accessible to screen readers
Mobile Optimization: Test on mobile devices for optimal experience

Accessibility

ARIA Labels: Proper labels for screen readers
Keyboard Navigation: Full keyboard support
Focus Management: Clear focus indicators
Screen Reader Support: Proper announcements for timeline events

Performance Tips

Image Optimization: Use optimized images for better loading performance
Scroll Optimization: Use throttled scroll events for better performance
Animation Optimization: Use CSS transforms for better performance
Lazy Loading: Load timeline content only when needed

Troubleshooting

Timeline not animating?

Check if Framer Motion is properly installed and the component is wrapped in a motion provider.

Scroll issues?

Ensure the timeline container has proper scroll context and height.

Styling conflicts?

Check for conflicting CSS classes or Tailwind CSS purging issues.

Performance problems?

Consider reducing animation complexity or using CSS-only animations for better performance.

PreviousText Effects

NextToggle Switch