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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: