Timeline

Before setting up the Timeline Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Timeline Widget—completely free! You can also explore both free and pro widgets using the filter options.

Introduction

The Timeline Widget displays events in order with customizable layouts for better storytelling. 

Key Use Cases for the Timeline Widget in Elementor:

• Use the Timeline widget to showcase events, milestones, or achievements in chronological order. 
• Customize the layout, colors, and design to create an engaging visual story and highlight key moments on your website.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Timeline Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Timeline Widget in the list.
• Toggle it on to enable the widget.

Now, the Timeline Widget is ready to use!

How to Add the Progress Bar Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Timeline”
4. Drag the Timeline widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Timeline Widget in Animation Addons:

• In the Elementor panel, search for the “Timeline Widget.”
• Drag and drop the widget into the desired section.
• Customize the timeline settings using the available options in the Elementor panel.

Your Timeline Widget is now ready to use! Use the interface to configure and personalize your timeline with different tabs for a visually engaging and chronological display of events or milestones.

Configuring Timeline Widget in Animation Addons: A Step-by-Step Guide

Once the Timeline widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Layout and Timeline & Image Animation (optional).

Layout

Customize the timeline structure, such as vertical or horizontal layout, alignment, spacing, and connectors to match your design needs.

Timeline

Add engaging entrance animations to timeline items and images, enhancing the visual flow and making your timeline more dynamic.

Image Animation

• And, explore the Animation section to apply effects like Power2out or Reveal for smooth transitions. Enable the Play Animation option to use your selected effect. 

      Note: Animations require the Pro version of the plugin.

1. Power2.out

• Behavior: Starts fast and slows down toward the end (ease-out).
• Use case: Smooth transitions for UI elements like buttons, cards, or text reveals.
• Why use it: It gives a professional, subtle feel without being too flashy.

2. Bounce

• Behavior: The animation hits the end point and bounces a few times like a ball.
• Use case: Fun, playful interfaces—great for kids’ websites, eCommerce pop-ups, or gamified UIs.
• Why use it: Adds personality and movement but might be too much for minimalist designs.

3. Back

• Behavior: Goes slightly past the target before coming back to settle—like a reverse tug.
• Use case: Hover animations, dropdowns, or modal pop-ups.
• Why use it: Adds a lively feel, perfect for making elements look responsive and interactive.

4. Elastic

• Behavior: Like a spring—overshoots the final position and oscillates before settling.
• Use case: Loading indicators, playful transitions, and attention-grabbing animations.
• Why use it: Eye-catching but can be overwhelming if used too much.

5. Slowmo

• Behavior: Starts slow, speeds up, then slows down again.
• Use case: Dramatic reveals—text overlays, hero sections, or featured images.
• Why use it: Great for storytelling or highlighting something important.

6. Stepped

• Behavior: Moves in sudden, discrete steps—no smooth transitions.
• Use case: Retro or glitchy design styles, pixel art interfaces, or robotic themes.
• Why use it: Stylized look, works when you want something to feel abrupt or digital.
  

7. Sine

• Behavior: Smooth, wave-like easing—in and out gently.
  
• Use case: Image sliders, content fades, scroll animations.
  
• Why use it: Very natural and smooth—good for subtle movement.

8. Expo

• Behavior: Exponential curve—starts slow then accelerates rapidly (or the opposite).
• Use case: When you want dramatic emphasis, like a hero element flying in.
• Why use it: Bold, impactful entrance—but can feel intense if overused.

Style Settings 

 Under the Style tab in the timeline widget you will find three expandable options:

Timeline

Controls the appearance of the line that connects the steps.

• Line color & thickness
• Alignment (left/center/right)
• Spacing between elements
• Line animation (if supported)

Content

Styles the text, headings, and descriptions inside each timeline item.

• Typography (font, size, color)
• Background color or image
• Padding, margin, border radius
• Box shadow or hover effects

Step

Customizes the icon or circle that represents each timeline point.

• Size & shape
• Border, background color
• Icon settings (if using icons)
• Hover/active animations

Advance Settings 

• In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! Now you know how to manage the Timeline Widget settings in Elementor to showcase events and milestones effectively on your website.

For any further assistance, feel free to reach out to our support team!