WP Manifestindependent plugin directory
manifest / content / nxt-timeline

Animated Timeline

WordPress plugin to auto-generate an animated and customizable timeline

by nexTab & Unleashed Design · github.com/nextab/nxt-timeline

★ 6stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/nextab/nxt-timeline/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/nextab/nxt-timeline ↗

Animated Timeline for WordPress

A lightweight WordPress plugin that creates an elegant animated SVG timeline that responds to scroll position.

Showcase / Installation: German

Showcase

Features

  • Scroll-triggered timeline progression
  • Customizable
    • Colors
    • Both solid + dashed paths
    • Adjustable path curvature and positioning

Requirements

  • WordPress 5.0 or higher
  • A theme with position: relative on the body element:
    body {
  position: relative;
}

Installation

  1. Upload the plugin files to /wp-content/plugins/nxt-timeline/
  2. Activate the plugin through the WordPress plugins screen
  3. Navigate to Settings → Animated Timeline to configure appearance
  4. Add the svg-target class to elements you want to connect in your timeline

Per-Page Selector Override

If different pages require a different CSS selector to target timeline elements, you can override the global selector on a per-page basis. Open the page in the Gutenberg editor and find the Timeline Selector panel in the Document Settings sidebar (right side). Enter a custom CSS selector there — it takes precedence over the global setting. Leave it empty to fall back to the global selector.

Usage

Basic Implementation

<div class="svg-target">First timeline point</div>
<div class="svg-target">Second timeline point</div>
<div class="svg-target">Third timeline point</div>

Configuration Options

  • Timeline Stops

    • Offset X/Y: Adjust the position of timeline markers
    • Element Type: Choose between circle, square, or no markers
    • Element Stroke Width: Set the thickness of marker outlines

  • Path Appearance

    • Path Style: Solid or dashed line
    • Path Width: Thickness of the timeline path
    • Path Colors: Separate colors for static and animated portions
    • Dash Settings: Customize length and gap for dashed style

  • Path Shape

    • Curve Roundness: Control the smoothness of path bends
    • Vertical/Horizontal Offset: Adjust path positioning
    • Y-Correction: Fine-tune the ending position

Color Configuration

Colors can be set using either:

  • Direct color values (hex, rgb, rgba)
  • CSS Variables for dynamic theming

Using CSS Variables:

:root {
    --timeline-color: #25536E;
    --marker-color: #6c1300;
}