Free horizontal and vertical timeline codes with effects.

Category: Timeline

Timelines are useful when you want to report a series of events, showing progress steps in a project, explaining history of something or etc. Based on your site design, you can utilize either horizontal or vertical timelines and add some effects to them. Please see various examples of the timelines below.

 Home  Help 

A responsive timeline slider with transition effects.

Responsive Sliding Timeline

A responsive timeline slider with transition effects.

Scrolling time line with setting image as background effect.

Timeline with Background Image

Scrolling time line with setting image as background effect.

Horizontal timeline for milestones with sliding effect.

Horizontal Milestone Timeline

Horizontal timeline for milestones with sliding effect.

Horizontal panel timeline with fading effect and hiding texts

Horizontal Fading Panel Timeline

Horizontal panel timeline with fading effect and hiding texts



Timeline cards with float-in effect while scrolling

Float-in Timeline Cards

Timeline cards with float-in effect while scrolling

Vertical timeline with fading and rotation effects.

Vertical Rotating Timeline

Vertical timeline with fading and rotation effects.

Reporting events in a timeline format.

Event Reporter Timeline

Reporting events in a timeline format.

Timeline template for creating a progress bar with toggle button.

Progress Bar Timeline

Timeline template for creating a progress bar with toggle button.

A responsive vertical timeline with action buttons for all cards.

Responsive Timeline with Action Button

A responsive vertical timeline with action buttons for all cards.

Collapsible timeline with buttons and details panel.

Collapsing Timeline with Buttons

Collapsible timeline with buttons and details panel.

A horizontal timeline in which the text of each timeline is animated by clicking on that timeline.

Horizontal Timeline with Event Popups

A horizontal timeline in which the text of each timeline is animated by clicking on that timeline.

A vertical timeline in which the title of the timeline turns blue in animation mode.

Timeline with Title Effect on Hover

A vertical timeline in which the title of the timeline turns blue in animation mode.

A vertical timeline that is displayed with fade animation in the initial number, and when we click on the more button, 4 more text and images of timeline . . .

Long Timeline with More Button

A vertical timeline that is displayed with fade animation in the initial number, and when we click on the more button, 4 more text and images of timeline . . .

A vertical timeline for text that when we scroll the text, the timeline moves downwards animated.

Timeline Animation on Scroll

A vertical timeline for text that when we scroll the text, the timeline moves downwards animated.

In this code, we have a timeline where the lines and the text box in each item can have a different color. Photos can also be included in each item.

Colored HTML Timeline with Images

In this code, we have a timeline where the lines and the text box in each item can have a different color. Photos can also be included in each item.

In this code we have a vertical timeline that has a black and red theme. In this timeline, each item includes one year. The text of each item is always . . .

Dynamic Dark Timeline with Images

In this code we have a vertical timeline that has a black and red theme. In this timeline, each item includes one year. The text of each item is always . . .

In this code, we have a timeline that can be seen by scrolling the page of other items that were not placed on the page. This is a vertical timeline.

Simple Scrollable Vertical Timeline for . . .

In this code, we have a timeline that can be seen by scrolling the page of other items that were not placed on the page. This is a vertical timeline.

The timeline in this code has a green and yellow theme and each item has an icon inside it. The icons also have a green theme and the timeline is vertical.

Simple HTML Timeline with Icons

The timeline in this code has a green and yellow theme and each item has an icon inside it. The icons also have a green theme and the timeline is vertical.

What are You Looking for?


Site Logo
  • About us
  • Contact us
  • How to Use?
  • Suggested
Free Frontend
Code Free Tutorial
CSS Free Code
Graphic Photo World


© Kerixa inc. All Rights Reserved.