Simple responsive vertical timeline with animation

<section class="timeline">
	<ul>
		<li>
			<div>
				<h4>Your date or title</h4>
				<p>Your text content</p>
			</div>
		</li>
		...
	</ul>
</section>

Add animation

To animate the timeline on scroll add the animation class

<section class="timeline animation">

Add timeline right option

On mobile devices the timeline is aligned to the left by default. If you want it on the right instead just add the additional right class.

<section class="timeline right">

Add animation together with the timeline right option

Animation can also be used in combination with the timeline right option.

<section class="timeline right animation">

Demo