Published on May 27, 2020

Vertical & Horizontal Timelines with Oxygen’s Repeater

David Browne

Here are some base styles for creating timelines using Oxygen's repeater element. The styles here are just to create the main structure, using pseudo elements for the timeline and the dots, all of which are easily customised via the provided CSS variables.

As we're using the repeater, the individual posts and content can be styled visually however we like. Also, scroll effects can be easily added to the posts via the effects options.

Live Demo

Creating the Structure

The structure for all of the examples is roughly the same. The repeater div and the first inner div that comes with the repeater is styled via the stylesheet.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right