Jubayer Neon Milestones for Elementor

Neon Timeline for Elementor adds a fully-featured, visually stunning timeline widget to the Elementor page builder. Display company histories, product roadmaps, career journeys, event chronologies, or step-by-step processes with a modern neon aesthetic — all controlled entirely from the Elementor panel, no custom CSS required.

Key Features

Layout

• Vertical timeline — alternating left/right cards with a centred animated rail
• Horizontal timeline — drag-to-scroll card track with above/below alternating support
• Per-breakpoint layout switching — choose a different layout for Desktop, Tablet, and Mobile independently (e.g. Horizontal on desktop, Vertical on mobile)
• Alternating, all-left, or all-right card positions for the vertical layout
• Alternating above/below card positions for the horizontal layout

Design

• 4 built-in neon gradient colour presets: Electric Violet, Neon Magenta, Aurora Blue, Cyber Green
• Custom colour override with full gradient control
• Glassmorphism-style dark cards with a layered glow border on hover
• Mouse spotlight effect — a subtle radial glow that follows the pointer inside each card
• Smooth hover lift animation on cards
• Active item rail progress fill that animates on scroll

Per-item controls

• Badge label and colour
• Date / year
• Title, description
• Icon (Font Awesome library, plain text/number, or image)
• Card image with configurable height, border radius, and object-fit
• Status indicator: Completed, Active, Upcoming
• CTA button with URL and external link support
• Individual card skin per item

Style controls (all via Elementor panel)

• Card background, border radius, padding
• Image height, image border radius, image fit
• Icon box size and icon glyph size
• Title, description, and date colours + full typography groups
• Rail colour and thickness
• Node size
• Gap between cards (vertical and horizontal independently)
• Horizontal card width and track top/bottom spacing
• Entrance animation: Fade Up, Fade In, Zoom In, None
• Stagger delay for sequential reveals

Performance & accessibility

• Minified CSS and JS served in production (SCRIPT_DEBUG aware)
• IntersectionObserver for scroll-triggered reveals (no layout-thrashing)
• Throttled resize handler for breakpoint detection
• Keyboard navigable (arrow keys move between items)
• prefers-reduced-motion respected — all animations disabled
• Lazy-loaded card images
• Proper ARIA attributes on interactive elements
• Full live preview in the Elementor editor (content_template)

Use Cases

• Company history and founding story
• Product roadmap
• Career journey / portfolio timeline
• Event chronology
• Step-by-step process guide
• Project milestones
• Product release timeline

Requirements

• WordPress 6.3 or higher
• Elementor 3.5.0 or higher (free version — does not require Elementor Pro)
• PHP 7.4 or higher