Interactive Timeline

How to use Interactive Timeline Widget of Sky Addons for Elementor

The Sky Addons Interactive Timeline is a vertical, scroll-driven timeline for telling ordered stories — company history, product roadmaps, or step-by-step processes. As the section scrolls into view, the spine draws itself, the active node lights up, and each entry reveals with a configurable motion effect. You can build your timeline from a hand-typed repeater of entries or pull it dynamically from any WP_Query, and even map each post through an Elementor Loop template. The Interactive Timeline widget gives you alternate, left, or right layouts, click-to-focus scrolling, and hover spotlighting — all configured visually inside Elementor with no code. This documentation will guide you through every setting of the Interactive Timeline widget, from data source to final styling.

Features:

1. Two Data Sources: Build the timeline manually with a repeater of entries, or connect it to Dynamic Posts using the built-in query builder for a live, self-updating timeline.
2. Per-Entry Media: Each entry supports an icon, an image, or no media at all — mix and match freely across the timeline.
3. Scroll-Driven Animation: Powered by GSAP ScrollTrigger, the spine fills, the current node activates, and each row animates in as you scroll.
4. Six Reveal Effects: Choose None, Fade, Slide Up, Slide From Side, Zoom, or a 3D Flip entrance, with an adjustable reveal duration.
5. Flexible Alignment: Alternate (zig-zag), Left, or Right layouts that collapse to a single side on mobile automatically.
6. Click to Focus: Click any node to smoothly scroll that entry to the centre of the screen.
7. Hover Spotlight: Dim the surrounding entries while hovering one to draw the eye to a single moment.
8. Loop Template Support: For the Dynamic Posts source, render each post through an Elementor Loop template for pixel-perfect, fully custom cards.
9. Full Styling Control: Independent style sections for the spine, node, card, date, title, text, media, and button.

Insert Interactive Timeline Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Interactive Timeline in the widget panel and drag it onto the canvas.
3. The widget renders immediately with five sample entries (2021–2025) so you can see the layout before editing.

Configure the Content

The Content section sets where the timeline data comes from and, for a custom timeline, the entries themselves.

1. Data Source: Choose Custom (Repeater) to type each entry by hand, or Dynamic Posts to build the timeline from a WP_Query.
2. Timeline Entries (Repeater): Shown when the source is Custom. Each entry has:
   • Date — the label shown above the entry (e.g. a year, month, or phase name).
   • Title — the milestone heading.
   • Text — a short description of what happened at this point.
   • Media — None, Icon, or Image.
   • Icon — pick an icon (shown when Media is Icon).
   • Image — choose an image (shown when Media is Image).
   • Link — an optional URL for the entry.
   • Button Label — the text of the button shown when a Link is set (e.g. “Learn More”).
3. Loop Template: Shown when the source is Dynamic Posts. Optionally select an Elementor Loop template to render for each post — this overrides the built-in card fields below. Leave it empty to use the built-in card.
4. Featured Image: For the built-in post card, toggle whether the post thumbnail appears.
5. Content Length (words): Trim each post excerpt to this many words. Set 0 for no limit.
6. Read More Button: Toggle a link button to the full post, and set its Button Label.

Configure the Query

The Query section appears only when the Data Source is Dynamic Posts. It uses the standard Sky Addons query builder, so you can choose the post type, order, filtering, and how many posts to pull. The Posts Per Page control defaults to 6 — set it to match the number of timeline entries you want to display.

Configure the Settings

The Settings section controls layout, entrance animation, and interaction behaviour.

1. Alignment: Alternate (zig-zag) stacks cards on alternating sides of the spine, or choose Left or Right for a single-sided layout. All alignments collapse to one side on mobile.
2. Reveal Effect: The entrance animation for each row — None, Fade, Slide Up, Slide From Side, Zoom, or 3D Flip (default).
3. Reveal Duration (ms): How long each entry’s reveal animation runs, from 100 to 2000 ms.
4. Click to Focus: When on, clicking a node smoothly scrolls that entry to the centre of the screen.
5. Hover Spotlight: When on, hovering one entry dims the others so the active moment stands out.

Style Your Interactive Timeline

Use the Style tab to customise every part of the timeline. The date, title, text, media, and button sections apply to the built-in card and are hidden automatically when a Loop template drives the markup.

1. Spine:
   Thickness of the vertical line, plus separate Track (the unfilled background) and Fill (the scroll progress) backgrounds — both support classic or gradient colours.
2. Node:
   Node size, gap to the card, a toggle for the connector line from node to card, node background, ring colour, and the active colour when a node lights up.
3. Card:
   Background, padding, border radius, max width, border, box shadow, and row spacing between entries.
4. Date:
   Typography and colour of the date label.
5. Title:
   Typography, colour, and spacing below the title.
6. Text:
   Typography and colour of the description body.
7. Media:
   Icon size, icon colour, and image border radius.
8. Button:
   Typography, padding, border radius, and Normal / Hover text and background colours for the entry button.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page and scroll to watch the spine draw, the nodes activate, and each entry reveal.

Best Practices

1. Use the Custom (Repeater) source with a distinct icon per entry for a company history or “our journey” section — the icons make each milestone instantly scannable.
2. For a product roadmap, keep the Date field as a phase label (e.g. “Q1”, “Now”, “Next”, “Later”) rather than a specific date so the timeline stays evergreen.
3. For numbered process steps or a how-it-works section, choose the Left alignment and a subtle Slide Up reveal so readers follow the sequence top to bottom.
4. To build a news or blog timeline, switch to Dynamic Posts and let the query pull your latest posts — the timeline updates itself as you publish.
5. Keep the reveal effect consistent with your site’s tone: 3D Flip and Zoom feel playful, while Fade reads more corporate.

Troubleshooting

1. “Add at least one entry” notice appears: Your Custom source has no timeline entries. Add at least one row to the Timeline Entries repeater. This notice only shows inside the Elementor editor.
2. “No posts found for this query” notice appears: The Dynamic Posts query returned nothing. Widen your query in the Query section — check the post type, any filters, and that matching posts are published.
3. Entries appear but the reveal animation does not play: The motion relies on GSAP ScrollTrigger. Confirm the widget’s scripts are loading and check the browser console for JS errors. Setting Reveal Effect to None will disable the animation intentionally.
4. The Loop Template does not render: Make sure the Data Source is Dynamic Posts and a valid Elementor Loop template is selected. Clearing the Loop Template falls back to the built-in card.

Frequently Asked Questions

Can I build the timeline from my blog posts automatically?

Yes. Set the Data Source to Dynamic Posts and use the Query section to choose the post type, order, and count. Each post’s date, title, excerpt, and featured image map directly into a timeline entry, so the timeline refreshes as you publish new content.

Can I fully control the look of each dynamic entry?

Yes. With the Dynamic Posts source, select a Loop Template built in Elementor. Each post is rendered through that template with its dynamic tags resolved, giving you complete control over the card markup. When a Loop Template is set, the built-in card fields and their style sections are hidden.

Does the timeline work on mobile?

Yes. Whichever alignment you choose — Alternate, Left, or Right — the timeline automatically collapses to a single side on mobile so the spine and cards remain readable on narrow screens.

Can I mix icons and images across entries?

Yes. In the Custom source, each entry has its own Media control set to None, Icon, or Image. You can give some milestones an icon and others a photo within the same timeline.

What does Click to Focus do?

When Click to Focus is enabled, clicking a node smoothly scrolls that entry to the centre of the screen. It is handy on long timelines where you want visitors to jump to and read a specific milestone without manually scrolling.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Interactive Timeline widget:

• Post List: List posts from any query — a companion to the Dynamic Posts source for building content-driven layouts.
• Loop Grid: Render posts through an Elementor Loop template in a grid, using the same template approach as the timeline.
• Reveal Effects: Add scroll-triggered entrance animations to any element to match the timeline’s motion.
• Reading Progress: Show a scroll progress bar that pairs naturally with a long, scroll-driven timeline page.

Conclusion

The Interactive Timeline widget from Sky Addons turns an ordered narrative into a living, scroll-driven experience. Whether you are telling your company history, laying out a product roadmap, or walking visitors through a process step by step, you can build it from a repeater or from live posts, choose an alignment and reveal effect, and style every detail from the panel — all without touching code. If you have any questions or need help, visit the Sky Addons support center.