Horizontal Timeline lays your events out from left to right along one continuous line, which makes a story of dates and milestones easy to scan. Every event has a round marker on the line, either a number or an icon, with its date, title and text above or below it. When there are more events than fit on the screen, the row scrolls sideways, with arrow buttons, swipe, mouse drag and the keyboard.

Markers, line and content

Choose whether the markers show the event number (counted automatically, so reordering events renumbers them) or an icon you pick for each event. The content can alternate above and below the line, which fits more events into the width, or sit always below or always above. On phones everything moves below the line so cards never overlap.

Pinned scroll mode

By default the section pins to the screen and scrolling the page slides the timeline to the right. A GSAP ScrollTrigger scrubs the movement, so it follows the scroll exactly and reverses when you scroll back. The progress line grows along the timeline and each event becomes active as the line reaches it. The row rests on the last event before the page carries on, and clicking a marker scrolls the page to that event. Phones, reduced-motion visitors and pages without GSAP get the swipe and arrows version below, and you can choose it on purpose with the Free scroll mode.

Navigation for overflow

Previous and next buttons scroll the row by most of a screen and disable themselves at each end. They are hidden when every event already fits. The row also scrolls with a swipe on touch screens, a click-and-drag with the mouse and the arrow, Home and End keys, and it snaps to events so nothing stops half in view.

Active event and smooth animation

Click a marker and that event becomes active: its marker fills and grows, its card lifts and gets a brand-coloured border, the row glides to centre it and the progress line animates along to it. You choose which event is active when the page loads. Entrance animations come from the template's GSAP motion presets, and reduced-motion settings switch the transitions off.

Responsive and accessible

The timeline responds to the width of its own container, so it works in a narrow column or a full-width section. The scrolling row is a labelled, focusable region, each marker is a real button named after its event, and the active marker is marked with aria-current.

Edit and export

The events are a repeater list of two to twelve items, each with a date, title, text and icon. Change the heading, colours and fonts, then export HTML, a ZIP, React or Vue, or fork it into My Code. For a vertical, path-style story see the Scroll Path Timeline, or for numbered steps see the How It Works Steps.