Responsive Animated Timeline Plugin With jQuery

A responsive, vertical, animated timeline plugin that slides in your stories with awesome CSS3 animations as you scroll down the page.

Supports any media types such as images, plain text, HTML5 videos and much more.

The vertical timeline will automatically collapse into a card view when running on a small screen (e.g. mobile and tablet devices).

Dependencies:

• jQuery.
• Bootstrap (for responsive layout).
• Font Awesome (for icons).
• Animate.css (for awesome animations).
• Wow.js (for reveal animations when scrolling).

How to use it:

1. Load necessary jQuery, Bootstrap and Font Awesome in the html document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Load the stylesheet style.css (Animate.css integrated) and JavaScript timeline.js (Wow.js integrated) in the document.

<link rel="stylesheet" href="css/style.css">
<script src="js/timeLine.js"></script>

3. Add your stories (events) to the timeline.

<div class="timeLine">
  <div class="row">
    <div class="lineHeader hidden-sm hidden-xs"></div>
    <div class="lineFooter hidden-sm hidden-xs"></div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item" >
      <div class="caption">
        <div class="star center-block">
          <span class="h3">27</span>
          <span>Jan</span>
          <span>1990</span>
        </div>
        <div class="image">
          <img src="img/born.jpg">
          <div class="title">
            <h2>Started to Breath <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>
          </div>
        </div>
        <div class="textContent">
          <p class="lead">Hi, this is my very short history, lets start from my berthday that was in 27 of January 1990. I thing my feet was bigger than this because now i just can buy shoes with size 45 LOL.</p>
        </div>
      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item">
      <div class="caption">
        <div class="star center-block">
          <span class="h3">15</span>
          <span>Sep</span>
          <span>2007</span>
        </div>
        <div class="image">
          <img src="img/cat.jpg">
          <div class="title">
            <h2>School Study <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>
          </div>
        </div>
        <div class="textContent">
          <p class="lead">I have studied for 12 years until i complete school then i was ready for joining university. i sufferd really but i dont know why!! may be i don't like studing in the past.</p>
        </div>
      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item">
      <div class="caption">
        <div class="star center-block">
          <span class="h3">01</span>
          <span>Jun</span>
          <span>2016</span>
        </div>
        <div class="image">
          <video src="bgvideo.mp4"></video>
          <div class="title">
            <h2>Hope <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>
          </div>
        </div>
        <div class="textContent">
          <p class="lead">Dreams are always growing up by hope. This is the last thing that i can not get rid of it just because i believe in myself and my abilities.</p>
        </div>
      </div>
    </div>

    ...

  </div>
</div>

4. Initialize the timeline on document ready.

$('.timeLine').timeLine();

5. Config the timeline by overriding the default settings as displayed below.

$('.timeLine').timeLine({
  myTimeLine: this,
  mainColor: '',    //Main color of timeLine
  opacity: '0.5',
  offset: '400',
  itemAnimateDuration: 2,
  lineColor: '#DDDDDD',
  LeftAnimation: 'rotateInUpRight', // see Animate.css                                      
  RightAnimation: 'rotateInUpLeft',    
});

---

This awesome jQuery plugin is developed by AhmedBHameed. For more Advanced Usages, please check the demo page or visit the official website.