Dear Timeline (Best Vertical & Horizontal Timeline)

Description

DearTimeline lets you create beautiful, responsive timelines with zero bloat. Unlike other plugins that ship heavy JS slider libraries (Slick.js, Owl Carousel), DearTimeline uses pure CSS techniques — CSS Scroll Snap for the horizontal layout and CSS Flexbox/Grid for vertical layouts — keeping your pages lightning-fast.

Horizontal Timeline Layout (NEW)

[deartimeline layout="horizontal"]

A fully responsive, scrollable horizontal timeline that rivals premium competitors without their bloat. Built with:

• CSS Scroll Snap — native browser scroll-snapping for butter-smooth card-by-card navigation. Swipe on mobile, scroll on desktop. Zero kilobytes of JavaScript.
• Left/Right Arrow Buttons — lightweight Vanilla JS for desktop users. Smart button states: auto-disabled at the start/end of the track. Uses requestAnimationFrame throttling for zero layout thrashing.
• Premium Cards — each event renders as a white rounded card with a gradient accent bar at the top, a calendar-style date box (month/day/year), event title, description, and optional featured image with hover zoom.
• Horizontal Spine — a gradient line passes through color-coded dot markers (one per event). Each dot takes the event’s custom color from the “Event Styling” meta box.
• Hidden Scrollbar — the track stays clean and premium on all browsers. Overflow is handled by native scroll, not ugly third-party scrollbars.
• Mobile-First — cards snap to 260px on mobile, 280px on desktop. Navigation buttons shrink fluidly.

The result: a performant, beautiful horizontal timeline that works on every device without weighing down your page.

Vertical Layouts

For traditional timelines, choose between two polished vertical styles:

• Classic [deartimeline layout="classic"] — calendar-box dates (month badge + day number) that alternate left and right around a central spine with square dot markers.
• Flat [deartimeline layout="flat"] — modern side-by-side cards: image on the left, text card on the right, alternating in a zigzag pattern around a thin vertical spine. This layout includes scroll-reveal animations via IntersectionObserver.

Both vertical layouts feature year separator labels, configurable per-event background colors, and responsive mobile stacking (single-sided spine, content below).

Why DearTimeline Plugin for WordPress?

Most timeline plugins clutter your workflow with the complex Block Editor or weigh down your pages with bloated scripts. DearTimeline provides a simplified, centralized “Event Styling” dashboard and uses lightweight, modern CSS techniques for butter-smooth performance on any device.

Core Features (Explained)

• Horizontal Layout: A sleek, scrollable horizontal timeline using native CSS Scroll Snap — no jQuery UI, no Slick.js, no bloat. Navigate with buttons or swipe. Each card gets a gradient accent bar, calendar-style date box, and a color-coded dot on the spine.
• Classic Vertical Layout: Calendar-box style dates with zigzag alternation around a central spine. Clean, editorial look.
• Flat Vertical Layout: Modern card-based layout with side-by-side image and text panels, automatic zigzag, and scroll-reveal animations.
• Centralized Workspace: Say goodbye to the Block Editor. Manage titles, dates, descriptions, and images from a single, high-priority dashboard in your admin screen.
• Integrated Live Preview: An embedded “Live Desktop Preview” appears directly below your editor, showing your changes instantly as you save.
• Frontend Batch Creation: Use the unique “Add New Event” popup on your website to add multiple events at once using a repeater-style form.
• Precision Image Controls: Every event image can have its own custom width and height, rendered with object-fit: cover to ensure professional cropping without distortion.
• Per-Event Color: Each event supports a custom background (vertical layouts) or dot color (horizontal layout) for visual distinction.
• Scroll Reveal Animations: Vertical timeline items fade and slide in as the user scrolls, powered by IntersectionObserver — choose from fade, flip, or zoom.

Best Use Cases

• Company History: showcase your brand’s journey from day one to today — the horizontal layout is perfect for decades-long stories.
• Product Roadmaps: Keep your customers informed about upcoming features and past milestones. The scroll-snap horizontal timeline makes roadmap browsing feel natural and fluid.
• Personal Portfolios: Display your career progression or life story in a visually engaging way — choose horizontal for a modern, magazine-style layout or vertical for a classic timeline.
• Event Schedules: Perfect for conferences or multi-day workshops. The horizontal layout lets attendees swipe through the agenda day by day.
• Horizontal Timelines: Any content that benefits from a left-to-right narrative — annual reports, project phases, step-by-step guides.

Usage

Basic Shortcode

[deartimeline] (displays Flat layout by default)

Switching Layouts

• Horizontal Layout: [deartimeline layout="horizontal"] — scrollable cards on a horizontal spine, CSS Scroll Snap, left/right nav buttons.
• Classic Layout: [deartimeline layout="classic"] — calendar-box style dates with zigzag alternation.
• Flat Layout: [deartimeline layout="flat"] — modern side-by-side cards with image and text.

Animations (Vertical layouts only)

Choose from professional entrance effects:
– [deartimeline animation="fade-in"] (Default)
– [deartimeline animation="flip-up"]
– [deartimeline animation="zoom"]