Animations classes on scroll
Bootstrap 5 Animations classes on scroll component
Responsive Animations classes on scroll built with Bootstrap 5. Subtle and smooth MDB animations on scroll provide the user with a unique experience.
Basic example
The easiest way to implement the animation on scroll is to use data-mdb-attributes. In the example
below, we use the icon
<i class="fas fa-car-side fa-3x"></i>
and add the attributes
data-mdb-toggle="animation"
data-mdb-animation="slide-in-left".
data-mdb-toggle="animation" is an obligatory attribute for each animation.
data-mdb-animation=""slide-in-left" lets you specify which animation apply to the
element. In the Animations Docs you can find available
animations.
Use data-mdb-animation-start="onScroll" to launch the animation when you scroll
the page and reach the element.
Notice that the animation will launch only once - even if you reach it when scrolling multiple times.
<i
class="fas fa-car-side fa-3x"
data-mdb-toggle="animation"
data-mdb-animation="slide-in-left"
data-mdb-animation-start="onScroll"
></i>
Repeat animation on scroll
If you want to launch the animation every time it's reached when scrolling use
data-mdb-animation-on-scroll="repeat".
<i
class="fas fa-car-side fa-3x"
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation="slide-in-left"
data-mdb-animation-start="onScroll"
data-mdb-animation-on-scroll="repeat"
></i>
Fading gallery
With animation on scroll you can create an impressive gallery that will appear smoothly step by step.
In the example below, we additionally use data-mdb-animation-delay attribute on
some images to make it appears one by one.
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="300"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="500"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="300"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/045.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<img
data-mdb-animation-init
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="fade-in"
data-mdb-animation-delay="500"
src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp"
class="img-fluid shadow-1-strong rounded"
/>
</div>
<!--Grid column-->
</div>
<!--Grid row-->