---
title: Animated Timeline
description: The Animated Timeline component is an interactive, visually appealing timeline that responds to user interaction. Built with Framer Motion and React, this component highlights key events or milestones in a vertical timeline structure.When a user hovers over a specific timeline item, the associated circular dot and all previous dots in the sequence turn green, indicating progression. The dot size also enlarges slightly, enhancing the focus on the current event. The component offers a sleek and smooth animation experience, perfect for showcasing chronological steps, milestones, or achievements in an engaging and user-friendly manner.This component is highly customizable, allowing easy modifications to the timeline content and styling, making it suitable for diverse applications such as resumes, project timelines, or product roadmaps.
author: VishalKumar03__
---

<ComponentPreview name="progress-animatedtimeline--docs" />

## Installation

<Steps>
<Step>Install dependencies</Step>

```bash
npm install framer-motion lucide-react
```

<Step>Run the following command</Step>

It will create a new file `animatedtimeline.tsx` inside the `components/animata/progress` directory.

```bash
mkdir -p components/animata/progress && touch components/animata/progress/animatedtimeline.tsx
```

<Step>Paste the code</Step>

Open the newly created file and paste the following code:

```jsx file=<rootDir>/animata/progress/animatedtimeline.tsx

```

</Steps>

## Credits

Built by [Vishal Kumar](https://github.com/vishal-kumar3)
