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.
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".
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.
