--- title: Scroll Timeline description: Create interactive vertical or horizontal timelines that animate as users scroll, enhancing engagement with customizable design options and intuitive setup in HubSpot. --- [Skip to content](https://hs.devwrks.co/scroll-timeline#main-content) [HS](https://hs.devwrks.co) - [Browse](https://hs.devwrks.co/#modules) - [FAQ](https://hs.devwrks.co/#faq) [Hire me for custom work →](https://hs.devwrks.co/scroll-timeline#get-in-touch) [Library](https://hs.devwrks.co/#modules) / Scroll Timeline # Scroll Timeline A vertical or horizontal timeline whose line fills in as visitors scroll, lighting up each step as it's reached. AnimationTimelineScroll [Preview →](https://hs.devwrks.co/scroll-timeline/preview) [Try the live demo](https://hs.devwrks.co/scroll-timeline#try) [Video](https://hs.devwrks.co/scroll-timeline#video) [Try it](https://hs.devwrks.co/scroll-timeline#try) [Setup](https://hs.devwrks.co/scroll-timeline#setup) [Settings](https://hs.devwrks.co/scroll-timeline#settings) Video ## See it in action Video coming soon Try it ## Play with the settings Try every setting the module has, and watch the preview update as you go. iHeads up: this demo is styled to match the devwrks brand, so the colors and fonts here aren't the module's defaults. In HubSpot, the module starts with its own default look, and the settings appear in HubSpot's editor (a white panel on the left of the page). The fields, names and options are the same. Preview data Reset Content Style Desktop Mobile Full width Hide settings Replay ↻ Preview only. It stays on screen while you scroll the settings. The module itself doesn't stick to the page. Setup ## Up and running in minutes 1. 01 ### Install it Get the module from the HubSpot Template Marketplace. It's added to your portal and shows up in the page editor. 2. 02 ### Add it to a page Open a page in the editor, click Add, search for Scroll Timeline and drag it into a drag-and-drop area. 3. 03 ### Add your steps On the Content tab, add one item per step or date. Give each a label (like Week 1 or 2019), a title and a short description. Drag items to reorder them. 4. 04 ### Pick a design On the Style tab, choose a design (Glowing trail, Editorial numbers, Design tool or Classic) and a layout: vertical or horizontal. 5. 05 ### Style it Set the fonts, line, markers and cards. Turn on "Pin while the line fills" if you want the timeline to stay on screen while it fills. 6. 06 ### Publish Preview, then publish. The line fills as visitors scroll. Visitors who prefer reduced motion see the finished timeline straight away. Settings ## Every option, in plain English ### Content Heading and intro An optional heading and a sentence or two above the timeline. Leave them empty to hide them. Heading level Tells Google how important the heading is. Use H1 only if this is the main heading of the page. Otherwise pick H2 or H3. Item title level The heading level of each step's title. Pick one level below the main heading. Timeline items One item per step or date, up to 20. Drag them to change the order. Date or step label A short label like a year, a date or "Step 1". Leave it empty to hide it. Custom number Replaces the step's number with your own, like 2019 or A. Leave it empty to count 1, 2, 3 automatically. Title and description The step's name, and a sentence or two about it. Button Turn on to add a button to a step, then write its text and choose the page it opens. Image Turn on to add an image to a step. Describe it in the alt text so everyone knows what it shows. Marker icon The icon shown on the line for this step. Only used when Marker style is set to Icon. ### Style › Presets Design The overall look: a glowing line, big editorial numbers, a design-tool selection frame, or a simple classic style. Each has its own settings further down. ### Style › Text Fonts "Theme" uses your website's fonts, "Custom" lets you pick another one. Size, color and style are set for the heading, intro, labels, titles and descriptions. ### Style › Background Background A color behind the whole timeline, or an image. Set the color's opacity to 0% to see the page behind it. ### Style › Spacing Spacing Padding around the timeline, the space below the heading, between steps, and between the line and the steps. ### Style › Alignment Alignment Lines up the heading, and the text inside each step: left, center, right, or toward the line. ### Style › Layout Layout Vertical with steps on both sides, on the left or on the right, or horizontal in one row. On phones every layout becomes one column. Label position Puts the date or step label across the line from the card, or above the title. Item width Horizontal only. The narrowest a step can get. If they don't all fit, the row scrolls sideways. Pin while the line fills Horizontal only. The timeline stays on screen while visitors scroll and the line fills, then the page carries on. ### Style › Line Line The line's color, the color it fills with, its style (solid, dashed, dotted or wavy) and its thickness. Wavy lines also have a wave height and length. ### Style › Markers Markers The circles on the line: a step number, an icon or a dot, their size and position, and their colors before and after the line reaches them. ### Style › Glowing trail Glow Only for the Glowing trail design. The color and size of the glow at the tip of the line, and whether the current step gets a ring. ### Style › Editorial numbers Numbers Only for the Editorial design. The size of the big numbers, their format (01 or 1), and their outline and fill colors. ### Style › Design tool Selection frame Only for the Design tool design. The color of the frame around the current step, and whether to show the little size tag. ### Style › Cards Cards Shows each step in a card, with its own background, border, corners and padding. You can highlight the current step and choose what happens when someone hovers over a card. ### Style › Images Images For steps with an image: put images across the line from the text, or above or below it, and set their width, shape, corners and spacing. ### Style › Buttons Buttons For steps with a button: filled, outline or a text link with an arrow, plus font, colors, shape and padding. ### Style › Animation Fill the line as visitors scroll Turns the animation on or off. When it's off, visitors see the finished timeline straight away. Line movement Follow the scroll grows the line smoothly. Snap to each step glides the line from one step to the next. Speed and items appear How quickly the line catches up with the scroll, and whether steps fade up, fade in or are already visible. Support ## Stuck on something? Get in touch and I'll help you get it working. [Get in touch →](https://hs.devwrks.co/scroll-timeline#get-in-touch) Made for HubSpot CMS by devwrks. - [Browse](https://hs.devwrks.co/#modules) - [Support](https://hs.devwrks.co/scroll-timeline#get-in-touch) - [Portfolio](https://www.devwrks.co) © 2026 devwrks [Terms of Service](https://hs.devwrks.co/terms)[Privacy Policy](https://hs.devwrks.co/privacy) Get in touch I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Get in touch Draft saved, continue anytime Get support I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Get support Draft saved, continue anytime Start a project I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Start a project Draft saved, continue anytime Suggest a module I usually reply within 24 hours. ### Thank you Your message has been sent. I'll get back to you shortly. Close Suggest a module Draft saved, continue anytime