Animations
Bootstrap 5 Animations
Subtle and smooth MDB animations provide the user with a unique experience when interacting with UI. There are several dozen animations at your disposal along with many customization and implementation options.
Bootstrap 5 animations imitate motions for web elements. +70 animations generated by CSS only, work on every browser.
Note: Read the API tab to find all available options and advanced customization
Move the mouse over the squares below to launch the animation.
Basic example
The easiest way to implement the animation 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-reset="true"
data-mdb-animation="slide-out-right"
to give it animation on click.
data-mdb-toggle="animation" is an obligatory attribute for each animation.
data-mdb-animation-reset="true" lets you decide if the animation can be repeated
data-mdb-animation="slide-right" lets you specify which animation apply to the
element. In the demo section above you can find available
animations.
Click the car to start the animation.
<i
data-mdb-toggle="animation"
data-mdb-animation-reset="true"
data-mdb-animation="slide-right"
class="fas fa-car-side fa-3x"
></i>
Animation list
By default, you have access to the basic animations. However, you can also import
_animate-extended.scss and compile extended animations.
Basic Animations
fade-infade-in-downfade-in-leftfade-in-rightfade-in-upfade-outfade-out-downfade-out-leftfade-out-rightfade-out-upslide-in-downslide-in-leftslide-in-rightslide-in-upslide-out-downslide-out-leftslide-out-rightslide-out-upslide-downslide-leftslide-rightslide-upzoom-inzoom-outtadapulse
Extended Animations
drop-indrop-outfly-infly-in-upfly-in-downfly-in-leftfly-in-rightfly-outfly-out-upfly-out-downfly-out-leftfly-out-rightbrowse-inbrowse-outbrowse-out-leftbrowse-out-rightjiggleflashshakeglow
Launch options
There are several options for launching the animation.
On click
Animation on click is a default launching option, so it does not require any data-mdb-attribute.
<i
data-mdb-toggle="animation"
data-mdb-animation-reset="true"
data-mdb-animation="slide-right"
class="fas fa-car-side fa-3x"
></i>
On hover
Use data-mdb-animation-start="onHover" to launch the animation on mouse hover.
<i
data-mdb-toggle="animation"
data-mdb-animation-start="onHover"
data-mdb-animation-reset="true"
data-mdb-animation="slide-right"
class="fas fa-car-side fa-3x"
></i>
On Load
Use data-mdb-animation-start="onLoad" to start the animation after loading the
page. Refresh your browser to see this effect.
<i
data-mdb-toggle="animation"
data-mdb-animation="zoom-in"
data-mdb-animation-start="onLoad"
class="fas fa-car-side fa-3x"
></i>
Manually
Use data-mdb-animation-start="manually" to initialize the component without
animating, adding hover, clicking or scrolling events and use the
animationStart method when you want to start the animation.
<i
data-mdb-toggle="animation"
data-mdb-animation="zoom-in"
data-mdb-animation-start="onLoad"
class="fas fa-car-side fa-3x"
></i>
On scroll
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
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation="slide-in-left"
class="fas fa-car-side fa-3x"
></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
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation-on-scroll="repeat"
data-mdb-animation="slide-in-left"
class="fas fa-car-side fa-3x"
></i>
Show on load
If you use animation onScroll, by default all elements are visible when the
page is loaded. They disappear and begin to animate after the first scroll. You can change
this by setting data-mdb-animation-show-on-load="false". However, remember
that this may have a negative impact on SEO.
<i
data-mdb-toggle="animation"
data-mdb-animation-start="onScroll"
data-mdb-animation-on-scroll="repeat"
data-mdb-animation-show-on-load="false"
data-mdb-animation="slide-in-left"
class="fas fa-car-side fa-3x"
></i>
Examples
Examples of practical usage of the animation.
Launching via external element
Click or hover the button to launch the animation.
<div class="d-flex justify-content-around">
<div>
<button
class="btn btn-primary me-5"
data-mdb-toggle="animation"
data-mdb-animation-target="#animate-click"
>
Animation on Click
</button>
<i
id="animate-click"
data-mdb-animation="slide-out-right"
data-mdb-animation-start="onClick"
data-mdb-animation-reset="true"
class="fas fa-car-side fa-3x"
></i>
</div>
<div>
<button
class="btn btn-primary me-5"
data-mdb-toggle="animation"
data-mdb-animation-target="#animate-hover"
>
Animation on Hover
</button>
<i
id="animate-hover"
data-mdb-animation="slide-out-right"
data-mdb-animation-start="onHover"
data-mdb-animation-reset="true"
class="fas fa-car-side fa-3x"
></i>
</div>
</div>
Start animation manually
You can use the animationStart and animationStop methods to start
or stop the animation at the right moment
<i id="manually-example" class="fas fa-car-side fa-3x"></i>
<button id="manually-btn-start" class="btn btn-primary ms-3">start</button>
<button id="manually-btn-stop" class="btn btn-primary ms-3">stop</button>
const manuallyEl = document.getElementById('manually-example');
const manuallyBtnStart = document.getElementById('manually-btn-start');
const manuallyBtnStop = document.getElementById('manually-btn-stop');
const manually = new mdb.Animate(manuallyEl, {
animation: 'fade-in',
animationStart: 'manually',
animationRepeat: true,
});
manuallyBtnStart.addEventListener('click', () => {
manually.startAnimation();
});
manuallyBtnStop.addEventListener('click', () => {
manually.stopAnimation();
});
Change animation type
You can change the element's animation type at any time using the
changeAnimationType() method.
<i id="change-animation-type-example" class="fas fa-car-side fa-3x"></i>
<button id="change-animation-type-btn" class="btn btn-primary ms-3">
change animation
</button>
const changeAnimationEl = document.getElementById('change-animation-type-example');
const changeAnimationBtn = document.getElementById('change-animation-type-btn');
let animation = 'zoom-in';
const changeAnimation = new mdb.Animate(changeAnimationEl, {
animation: animation,
animationStart: 'onLoad',
animationDuration: 1000,
animationRepeat: true,
});
changeAnimation.init();
changeAnimationBtn.addEventListener('click', () => {
if (animation === 'zoom-in') {
animation = 'zoom-out'
} else {
animation = 'zoom-in'
}
changeAnimation.stopAnimation();
changeAnimation.changeAnimationType(animation);
changeAnimation.startAnimation();
})
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-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-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-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-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-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-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-->
List group
Click "Add" button to add a new item to the list.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="d-flex">
<div class="card" style="width: 18rem;">
<ul id="example-list" class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="ms-3">
<button class="btn btn-primary" id="add">add</button>
</div>
</div>
let elementNumber = 1;
const bindRemoveClickEvent = (el) => {
const element = el;
element.addEventListener('click', () => {
const prevElement = element.previousElementSibling ? element.previousElementSibling : element;
const animation = element === prevElement ? 'fade-out' : 'slide-out-up';
prevElement.style.zIndex = '1';
element.addEventListener('animationend', () => {
element.remove();
prevElement.style.zIndex = '0';
});
element.classList.add('animation', 'faster', animation);
});
};
const addNewOption = () => {
const element = document.getElementById('example-list');
const newElement = document.createElement('li');
const lastElement = element.lastElementChild || element;
const animation = element === lastElement ? 'fade-in' : 'slide-in-down';
newElement.innerText = `element ${elementNumber}`;
lastElement.style.zIndex = '1';
newElement.classList.add('list-group-item', 'animation', 'faster', animation);
newElement.addEventListener('animationend', () => {
lastElement.style.zIndex = '0';
newElement.classList.remove('animation', 'faster', animation);
});
bindRemoveClickEvent(newElement);
element.appendChild(newElement);
elementNumber += 1;
};
document.querySelectorAll('#example-list li').forEach((el) => {
bindRemoveClickEvent(el);
});
document.getElementById('add').addEventListener('click', () => {
addNewOption();
});
Accordion
Click the collapsible group of the accordion to see the animation.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header bg-white" id="headingOne">
<h2 class="mb-0">
<button
class="btn btn-link btn-block text-start"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
data-mdb-animation-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Collapsible Group Item #1
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-mdb-parent="#accordionExample"
>
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header bg-white" id="headingTwo">
<h2 class="mb-0">
<button
class="btn btn-link btn-block text-start collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
data-mdb-animation-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Collapsible Group Item #2
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-mdb-parent="#accordionExample"
>
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header bg-white" id="headingThree">
<h2 class="mb-0">
<button
class="btn btn-link btn-block text-start collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseThree"
data-mdb-animation-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Collapsible Group Item #3
</button>
</h2>
</div>
<div
id="collapseThree"
class="collapse"
aria-labelledby="headingThree"
data-mdb-parent="#accordionExample"
>
<div class="card-body">...</div>
</div>
</div>
</div>
document.querySelectorAll('button[data-mdb-toggle="collapse"]').forEach((el) => {
const animate = new mdb.Animate(el, {
animation: 'fade-in-up',
delay: '500',
duration: '500',
});
animate.init();
});