This scroll animated timeline WordPress build turns a list of dates into something that feels alive as visitors scroll through it. Icons lock in place and change color, content fades into view, and a bar grows down the page to show progress. It’s one of the more involved builds in Mosaic, but it comes together from grids, interactions, and two nested components.
Build the container and grid
Add a Rows element inside your section. Set its Row gap to a large value, like the 3XL variable, to space out each timeline entry.
Set the Rows element’s position to Relative and its overflow to Clip. Build the timeline entries first, then add the progress bar into this same container afterward.
Add a Grid element and give it three columns. Set the first and third columns to a wide fraction value, like 400fr, and the middle one to a narrow value, like 200fr, this middle column is the spacer the progress bar will run through.
Set the grid’s Items X to Stretch, so each column’s content spans the full height of the row instead of just its own content size.
Add and animate the entry
In the first grid column, add a Rows element, then add a Button, a Text element, and a duplicate of that Text element inside it. Set the Row gap to a small value, like XS, to tighten up the spacing.
Switch the button’s element class to Badge, Secondary, S, then update its text to the entry’s year.
Switch the first text element to a Heading 4 and the second to a Paragraph, size M, then replace both with your own content.
Select the Grid and add a new Rows element for the middle column, then add an Icon element inside it and pick one from the library.
Switch the icon’s element class to Icon box, Secondary, XL, then set its alignment to Center.
Set the icon’s position to Sticky and its Top offset to 50 viewport height. This locks the icon to the center of the screen as the entry scrolls past, the effect the whole timeline is built around.
Select the Grid again, add an Image element in the third column, then choose your image from the media library.
Select the Row and add a Scroll into view interaction. Set its End condition to Bottom of the page, then add an Opacity action with an Initial value of 25% and a To value of 100%.
Switch to the Out of view tab, duplicate the fade-in action, then change its To value back to 25%. The row now fades down again as it scrolls out of view.
Select the Icon and add its own Scroll into view interaction, with the same Bottom of the page end condition. Add a Text color action set to one of your accent variables, since the icon uses currentColor, this recolors the icon itself.
Add a Background color action set to the same accent variable. Shorten both tweens’ duration, for example to 300ms, so the color change feels quick instead of sluggish.
Duplicate both actions under Out of view, then set the Text color and Background color back to their original values.
Turn it into components
Select the Grid and convert it into a Part component, for example named Timeline content, Left. Every instance of it now updates together whenever you edit the original.
Add a Div, then add a Component element inside it pointing to the Left component. Every other entry needs its text and icon flipped to the opposite side.
Convert that Div into its own Part component, for example named Timeline content, Right. Components can contain other components, so this new one holds an instance of the first.
Inside the Right component, open the nested Left instance and drag its items into the opposite order. This flips the layout without duplicating any of the original styling.
Duplicate the Left and Right instances until you have as many entries as you need, alternating between the two. Update each one’s image, year, heading, paragraph, and icon.
Add the progress bar
Select the Rows that holds all your entries and add a Div above them, renamed to something like Progress wrapper. Set it to Align Center and give it a background color.
Set the wrapper’s width to a small fixed value, like 4px, and its height to 130%. Set its position to Absolute, with Top at 0 and Bottom at -30%.
Inside the wrapper, add a Div renamed to Progress bar. Pull it upward with a negative top margin equal to the bar’s own height, for example -50vh.
Give the bar a background color and set its width to 100% and height to 50 viewport height. Set its position to Sticky, anchored to the Top, so it grows down the page as the visitor scrolls.
Result
The timeline now runs down the page as one connected build. Content fades in as each entry scrolls into view, its icon switches color at the same time, and a progress bar grows behind it all. Since each entry is a nested component, a single style edit updates every instance of the timeline at once.