Introduction

First-Responsive Timeline is a jquery timeline which contains different styles and animations.

Thank you for purchasing First-Responsive Timeline! These docs provide usage instructions for the jquery timeline built into the page. If you run into any other problems with the plugin please contact us here: togrul10a@gmail.com.

What's Included

First-Responsive Timeline contains 14(fourteen) various amazing styles, 3(three) different screen align mode styles,45(fourty five) different transition style for customizing as you wish.

Css files

First-Responsive Timeline consist 5 css files:

    1)This css file use for default styles inside page.

  • <link href="/css/default.min.css" rel="stylesheet">

  • 2)Second css file consist all of timeline styles.

  • <link href="/css/frst-timeline-style-1.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-2.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-3.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-4.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-5.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-6.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-7.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-8.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-9.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-10.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-11.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-12.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-13.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-14.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-15.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-16.css" rel="stylesheet">
    <link href="/css/frst-timeline-style-17.css" rel="stylesheet">

  • 3)Third css file using for demo preview section.

  • <link href="/css/demo.css" rel="stylesheet">

  • 4)Fourth css file consist animation styles inside timeline.

  • <link href="/css/animate.min.css" rel="stylesheet">
  • 5)Fifth css file - reset css file change the default font family in all browsers,correct the line height in all browsers,prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.

  • <link href="/css/reset.css" rel="stylesheet">

Js files

4 js files also include into the project.

    1)First js file using for custom functions for timeline.

  • <script src="/js/frst-scale-effect.min.js"></script>

  • 2)Second js file is a transition and scroll effects for jquery timeline.

  • <script src="/js/frst-timeline.min.js"></script>

  • 3)Third js file is using for touch scrolling.

  • <script src="/js/jquery.overscroll.min.js"></script>
  • 4)Fourth js file is modernizr.js.Modernizr has an optional (not included) conditional resource loader called Modernizr.load(), based on Yepnope.js (yepnopejs.com).

  • <script src="/js/jquery.minimal-plugins.min.js"></script>

Some code example shown here

This code is a example for creating one of the branch of timeline.

<div class="frst-timeline-block frst-even-item" data-animation="slideInUp">
      <div class="frst-timeline-img">
          <span><i class="fa fa-envelope" aria-hidden="true"></i></span>
          </div>
             <!-- frst-timeline-img -->
              <div class="frst-timeline-content">
              <div class="frst-timeline-content-inner">
                <h2>Amazing responsive timeline</h2>
                <span class="frst-date">12, September</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus. Sed suscipit tempor tellus ut mollis. Duis nisl nibh, pretium quis tincidunt eu, facilisis eu dolor. </p>
                </div>
                <!-- frst-timeline-content-inner -->
            </div>
           <!-- frst-timeline-content -->
           </div>          
          

It is example for how to use this timeline without header customization

It is a simple explain with style 9


                    <!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First Timeline </title>
<!--Font Awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="css/demo/reset.css">
<link rel="stylesheet" href="css/plugins/animate.min.css">
<!-- CSS Animation -->
<link rel="stylesheet" href="css/default.min.css">
<!-- Resource style -->
<link rel="stylesheet" href="css/demo/demo.css">
<link rel="stylesheet" href="css/frst-timeline-style-9.css">
<!-- Resource style -->
<script src="js/modernizr.js"></script>
</head>
<body>
<div id="page">
	<div class="frst-container" data-animation-name="ZoomIn">
		<!-- frst-left-align/frst-right-align/frst-alternate/frst-date-opposite/frst-responsive-right-->
		<div class="frst-timeline frst-timeline-style-9 frst-alternate">
			<div class="frst-timeline-block frst-odd-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Huseyn A.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus. Sed suscipit tempor tellus ut mollis. Duis nisl nibh, pretium quis tincidunt eu, facilisis eu dolor.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-even-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">James R.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<img src="images/img-02.jpg" alt="">
						</div>
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-odd-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Jessica R.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<img src="images/6.jpg" alt="">
						</div>
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-even-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Pablo E.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<iframe width="560" height="280" src="https://www.youtube.com/embed/71SbR2w3LP4" frameborder="0" allowfullscreen></iframe>
						</div>
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-odd-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Rebecca C.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<iframe width="560" height="280" src="https://www.youtube.com/embed/71SbR2w3LP4" frameborder="0" allowfullscreen></iframe>
						</div>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-even-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Rufat A.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus. Sed suscipit tempor tellus ut mollis. Duis nisl nibh, pretium quis tincidunt eu, facilisis eu dolor.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-odd-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Henry L.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<img src="images/4.jpg" alt="">
						</div>
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-even-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Rebecca C.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<div class="media-section">
							<img src="images/img-12.jpg" alt="">
						</div>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
			<div class="frst-timeline-block frst-odd-item" data-animation="zoomIn">
				<div class="frst-timeline-img">
					<span></span>
					<span class="step-text">Pablo E.</span>
				</div>
				<!-- frst-timeline-img -->
				<div class="frst-timeline-content">
					<span class="connector"></span>
					<div class="frst-timeline-content-inner">
						<h2>Frst Responsive Timeline</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
						</p>
					</div>
					<!-- frst-timeline-content-inner -->
				</div>
				<!-- frst-timeline-content -->
			</div>
			<!-- frst-timeline-block -->
		</div>
		<!-- frst-timeline -->
	</div>
	<!-- .frst-container -->
</div>
<!-- #page-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/frst-timeline.min.js"></script>
<!-- Resource jQuery -->
</body>
</html>
          

In there you can see how to change timeline animations without customization.And set animation which you want.

It is the simple way to set default animation.