Timeline is the presentation of a chronological sequence of events along a drawn line that equips a viewer to understand temporal relationships quickly.
We are using animate on scroll plugin to animate timeline on page scroll. Read the official Animate on scroll for a full list of instructions and other options.
Create a basic timeline by using .timeline
as a wrapper of .timeline-item
. Define your events inside .timeline-event
.
Add a point to timeline by using .timeline-point
inside .timeline-item
. Use three different kind of timeline pointer options: Point Timeline, Outline Timeline and Indicator Timeline with Icon. To create a point timeline, use .timeline-point-primary
with .timeline-point
. To create a outline timeline, use .timeline-outline
with .timeline
. To create a indicator timeline with icon, use .timeline-indicator-primary
with .timeline-indicator
.
Change indicator's color by using class timeline-point-{color}
and timeline-indicator-{color}
with
.timeline-point
& .timeline-indicator
respectively.
Invoices have been paid to the company
Project meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection6 team members in a project
<ul class="timeline">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0 text-body">12 Invoices have been paid</h6>
<small class="text-muted">12 min ago</small>
</div>
<p class="mb-2">
Invoices have been paid to the company
</p>
<div class="d-flex align-items-center mb-1">
<div class="badge bg-lighter rounded mb-1_5">
<img src="assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
<span class="h6 mb-0">invoices.pdf</span>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-success"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-muted">45 min ago</small>
</div>
<p class="mb-2">
Project meeting with john @10:15am
</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
<div class="d-flex flex-wrap align-items-center">
<div class="avatar avatar-sm me-2">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of ThemeSelection</small>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-muted">2 Day Ago</small>
</div>
<p class="mb-2">
6 team members in a project
</p>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li class="avatar">
<span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
Create timeline Outlined by using class .timeline-outline
with .timeline
class.
Invoices have been paid to the company
Project meeting with john @10:15am
Lester McCarthy (Client)
CEO of ThemeSelection6 team members in a project
<ul class="timeline timeline-outline mb-0">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">12 Invoices have been paid</h6>
<small class="text-muted">12 min ago</small>
</div>
<p class="mb-2"> Invoices have been paid to the company</p>
<div class="d-flex align-items-center mb-1">
<div class="badge bg-lighter rounded mb-1_5">
<img src="assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-success"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-muted">45 min ago</small>
</div>
<p class="mb-2">
Project meeting with john @10:15am
</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
<div class="d-flex flex-wrap align-items-center">
<div class="avatar avatar-sm me-2">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of ThemeSelection</small>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-muted">2 Day Ago</small>
</div>
<p class="mb-2">6 team members in a project</p>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
</li>
<li class="avatar">
<span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
Create a centered timeline by using .timeline-center
with .timeline
. Centered Timeline's items will automatically take their position. If you want to position them manually, you can use .timeline-item-{left|right}
with .timeline-item
.
Use animate on scroll for timeline animation, click here to learn about it's usage.
Our main goal is to design a new mobile application for our client. The customer wants a clean & flat design.
Participants
Click the button below to read financial reports
I gaze longingly at the beautiful, perfect, plump donut. This is a delicately crafted piece of art. The mouthwatering mound of miraculous mush isn't able to escape my sight...read more
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem?
Due Date: 15th Jan
Develop an online store of electronic devices for the provided layout, as well as develop a mobile version of it. The must be compatible with any CMS.
Developers
Deadline
20 Dec 2077
Budget
$50000
<ul class="timeline timeline-center mt-12">
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-paint"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header d-flex justify-content-between align-items-center flex-wrap">
<h6 class="card-title mb-0">Designing UI</h6>
<div class="meta">
<span class="badge rounded-pill bg-label-primary">Design</span>
<span class="badge rounded-pill bg-label-success">Meeting</span>
</div>
</div>
<div class="card-body">
<p class="mb-2">
Our main goal is to design a new mobile application for our
client. The customer wants a clean & flat design.
</p>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div>
<p class="text-muted mb-2">Participants</p>
<ul class="list-unstyled users-list d-flex align-items-center avatar-group">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="assets/img/avatars/5.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="assets/img/avatars/12.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="assets/img/avatars/6.png" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="assets/img/avatars/10.png" alt="Avatar" />
</li>
</ul>
</div>
</div>
</div>
<div class="timeline-event-time">1st January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-question-mark"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<h6 class="card-header">Survey Report</h6>
<div class="card-body">
<div class="d-flex flex-wrap mb-6">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<span>assigned this task to <span class="fw-medium">Sarah</span></span>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-danger" style="height: 6px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 48.7%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Jquery</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 31.3%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>React</small>
<small>React</small>
<small>React</small>
<small>React</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-warning" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Angular</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-info" style="height: 6px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>VUE</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="w-100">
<div class="progress bg-label-success" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Laravel</small>
</div>
</li>
</ul>
</div>
<div class="timeline-event-time">2nd January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-line-chart"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<h6 class="card-header">Financial Reports</h6>
<div class="card-body">
<p class="mb-2">Click the button below to read financial reports</p>
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Show Report
</button>
<div class="collapse" id="collapseExample">
<ul class="list-group list-group-flush mt-4">
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span>Last Years's Profit : <span class="fw-medium">$20000</span></span>
<i class="bx bx-share-alt cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> This Years's Profit : <span class="fw-medium">$25000</span></span>
<i class="bx bx-share-alt cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> Last Years's Commission : <span class="fw-medium">$5000</span></span>
<i class="bx bx-share-alt cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> This Years's Commission : <span class="fw-medium">$7000</span></span>
<i class="bx bx-share-alt cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span>
This Years's Total Balance : <span class="fw-medium">$70000</span></span>
<i class="bx bx-share-alt cursor-pointer"></i>
</li>
</ul>
</div>
</div>
<div class="timeline-event-time">5th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-warning" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-doughnut-chart"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<h6 class="card-header">Snacks</h6>
<div class="card-body">
<div class="d-flex flex-sm-row flex-column">
<img src="assets/img/elements/13.jpg" class="rounded me-4 mb-sm-0 mb-2" alt="doughnut" height="64" width="64" />
<div>
<h6 class="mb-2">
A Donut which straight gone to Your Tummy
</h6>
<p class="mb-2">
I gaze longingly at the beautiful, perfect, plump donut. This
is a delicately crafted piece of art. The mouthwatering mound
of miraculous mush isn't able to escape my sight...<a href="javascript:void(0)">read more</a>
</p>
<div class="d-flex justify-content-between align-items-center">
<div>
<i class="bx bxs-star text-warning"></i>
<i class="bx bxs-star text-warning"></i>
<i class="bx bxs-star text-warning"></i>
<i class="bx bxs-star text-warning"></i>
<i class="bx bx-star"></i>
</div>
<div>
<span class="fw-medium">$5.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-event-time">10th January</div>
</div>
</li>
<li class="timeline-item timeline-item-right">
<span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-map"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<div class="card-header d-flex justify-content-between">
<h6 class="card-title mb-0">
<i class="bx bx-map"></i>
<span class="align-middle">Location</span>
</h6>
<span class="badge rounded-pill bg-label-danger">High</span>
</div>
<div class="card-body py-0">
<h6 class="mb-2">
Final location for the company celebration.
</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas,
quidem?
</p>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="d-flex align-items-center flex-wrap cursor-pointer gap-4">
<i class="bx bx-link"></i>
<div class="position-relative">
<i class="bx bx-message"></i>
<span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
</div>
<i class="bx bx-user"></i>
</div>
<p class="mb-0">
<span class="text-muted">Due Date:</span>
15th Jan
</p>
</div>
<div class="timeline-event-time">12th January</div>
</div>
</li>
<li class="timeline-item timeline-item-left">
<span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-dumbbell"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header d-flex justify-content-between">
<h6 class="card-title mb-0">Gym Program</h6>
<span class="text-muted">5:00 - 6:10AM</span>
</div>
<div class="card-body pb-4 pt-0">
<div class="hours mb-2">
<i class="bx bx-time"></i>
<span>1.1 Hours</span>
<i class="bx bx-transfer mx-2"></i>
<span>Weekly</span>
</div>
<div class="location">
<i class="bx bx-map"></i>
<span class="align-middle">Rock's Gym</span>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="tags">
<span class="badge rounded-pill bg-label-danger">Gym</span>
<span class="badge rounded-pill bg-label-info">Power</span>
</div>
<div>
<i class="bx bx-dots-vertical-rounded cursor-pointer"></i>
</div>
</div>
<div class="timeline-event-time">15th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-dollar"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<h6 class="card-header">General Reserve</h6>
<div class="card-body">
<ul class="list-unstyled">
<li class="d-flex justify-content-start align-items-center text-success mb-4">
<i class="bx bx-dollar bx-sm me-4"></i>
<div class="ps-4 border-start">
<small class="text-muted mb-1">Cash</small>
<h5 class="mb-0">$500</h5>
</div>
</li>
<li class="d-flex justify-content-start align-items-center text-info mb-4">
<i class="bx bx-credit-card bx-sm me-4"></i>
<div class="ps-4 border-start">
<small class="text-muted mb-1">Credit Card</small>
<h5 class="mb-0">$5000</h5>
</div>
</li>
<li class="d-flex justify-content-start align-items-center text-primary">
<i class="bx bx-line-chart bx-sm me-4"></i>
<div class="ps-4 border-start">
<small class="text-muted mb-1">Investments</small>
<h5 class="mb-0">$300</h5>
</div>
</li>
</ul>
</div>
<div class="timeline-event-time">16th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-server"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<div class="card-header d-flex justify-content-between">
<h6 class="card-title mb-0">
<span class="align-middle">Ubuntu Server</span>
</h6>
<span class="badge rounded-pill bg-label-danger">Inactive</span>
</div>
<div class="card-body pb-2 pt-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="bx bx-globe"></i>
<span>IP Address</span>
</div>
<div>
192.654.8.566
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="bx bx-chip"></i>
<span>CPU</span>
</div>
<div>
4 Cores
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="bx bx-server"></i>
<span>Ram</span>
</div>
<div>
500 MB
</div>
</li>
</ul>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="server-icons">
<i class="bx bx-share-alt me-2"></i>
<i class="bx bx-sync"></i>
</div>
</div>
<div class="timeline-event-time">20th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
<i class="bx bx-store"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header d-flex justify-content-between">
<h6 class="card-title mb-0"><span class="align-middle">Online Store</span></h6>
<i class="bx bx-dots-vertical-rounded cursor-pointer"></i>
</div>
<div class="card-body pt-0">
<p>
Develop an online store of electronic devices for the provided
layout, as well as develop a mobile version of it. The must be
compatible with any CMS.
</p>
<div class="d-flex flex-wrap flex-sm-row flex-column">
<div class="mb-sm-0 mb-4 me-12">
<p class="text-muted mb-2">Developers</p>
<div class="d-flex align-items-center">
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-primary">A</span>
</div>
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-success">B</span>
</div>
<div class="avatar avatar-xs">
<span class="avatar-initial rounded-circle bg-label-danger">C</span>
</div>
</div>
</div>
<div class="mb-sm-0 mb-4 me-12">
<p class="text-muted mb-2">Deadline</p>
<p class="mb-0">20 Dec 2077</p>
</div>
<div>
<p class="text-muted mb-2">Budget</p>
<p class="mb-0">$50000</p>
</div>
</div>
</div>
<div class="timeline-event-time">25th January</div>
</div>
</li>
</ul>
Refer below mentioned for all the modifier classes of timeline
Class | Value |
---|---|
class="timeline-item border-left-dashed"
|
dashed |
class="timeline-point timeline-point-{color}"
|
primary | secondary | success | danger | warning | info | dark |
class="timeline-indicator timeline-indicator-{color}"
|
primary | secondary | success | danger | warning | info | dark |
class="timeline-event timeline-event-{style}"
|
shadow |
Refer below mentioned for all the variables of timeline
Variable | Description |
---|---|
$timeline-border-color
|
Variable for Timeline's border color |
$timeline-item-bg-color
|
Variable for Timeline item default bg color |
$timeline-item-border-radius
|
Variable for Timeline item's border radius |
$timeline-item-min-height
|
Variable for Timeline item's min height |
$timeline-item-padding-x
|
Variable for Timeline item's event x axis padding |
$timeline-item-padding-y
|
Variable for Timeline item's event y axis padding |
$timeline-event-time-size
|
Variable for Timeline event time font size |
$timeline-event-time-color
|
Variable for Timeline event time color |
$timeline-point-size
|
Variable for Timeline point size |
$timeline-indicator-size
|
Variable for Timeline indicator with icon size |
$timeline-point-color
|
Variable for point & indicator timeline's default color |
$timeline-point-indicator-bg-scale
|
Variable for indicator timeline's background color scale |
Animate On Scroll lets you add animation your element when user scroll to it.
Usage
In order to use Animate on scroll on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/animate-on-scroll/animate-on-scroll.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/animate-on-scroll/animate-on-scroll.js" />
Example
Using Animate on scroll is really simple all you have to do is initialize it like this: AOS.init()
and then you can pass data-aos="ANIMATION_NAME"
to the element you want to animate.