Animations
Vue 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.
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 wrap element you want to animate with
MDBAnimation component. In the example below, we use the icon
<MDBIcon icon="car-side" size="3x"/>
and MDBAnimation properties
reset animation="slide-right"
to give it animation on click.
animation is an obligatory property to create animation for component
reset property lets you decide if the animation can be repeated
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.
<template>
<MDBAnimation reset animation="slide-right">
<MDBIcon icon="car-side" size="3x"></MDBIcon>
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
Animation list
By default, you have access to the basic animations. However, you can also import
_animate-extended.scsscode> 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-dDownslide-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 property.
<template>
<MDBAnimation reset animation="slide-right">
<MDBIcon icon="car-side" size="3x"></MDBIcon>
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
On hover
Use trigger="onHover" to launch the animation on mouse hover.
<template>
<MDBAnimation trigger="onHover" reset animation="slide-right">
<MDBIcon icon="car-side" size="3x"></MDBIcon>
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
On Load
Use trigger="onLoad" to start the animation after loading the page. Refresh
your browser to see this effect.
<template>
<MDBAnimation trigger="onLoad" reset animation="slide-right">
<MDBIcon icon="car-side" size="3x"></MDBIcon>
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
Manually
Use trigger="manually" to initialize the component without animating, adding
hover, clicking or scrolling events. To run the animation use the
startAnimation method or psss truthy value to v-model property.
<template>
<MDBAnimation trigger="manually" reset animation="slide-right" ref="manual">
<MDBIcon icon="car-side" size="3x"></MDBIcon>
</MDBAnimation>
<MDBBtn
style="width: 200px"
color="primary"
@click="
() => {
if ($refs.manual) {
$refs.manual.startAnimation();
}
}
"
>Start with 'startAnimation' function
</MDBBtn>
</template>
<script>
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAnimation,
MDBIcon,
MDBBtn,
},
setup() {
const manual = ref('manual');
return {
manual,
};
},
};
</script>
On scroll
Use trigger="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.
<template>
<MDBAnimation trigger="onScroll" animation="slide-in-left">
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
Repeat animation on scroll
If you want to launch the animation every time it's reached when scrolling use
repeatOnScroll.
<template>
<MDBAnimation trigger="onScroll" animation="slide-in-left" repeatOnScroll>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
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 :showOnLoad="false". However, remember that this may have a
negative impact on SEO.
<template>
<MDBAnimation
trigger="onScroll"
animation="slide-in-left"
repeatOnScroll
:showOnLoad="false"
>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
</template>
<script>
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBIcon,
},
};
</script>
Examples
Examples of practical usage of the animation.
Launching via external element
Click or hover the button to launch the animation.
<template>
<div class="d-flex justify-content-around">
<div>
<MDBBtn
color="primary"
class="me-5"
aria-controls="#animateClick"
@click="animateClick = true"
>
Animation on Click
</MDBBtn>
<MDBAnimation
id="animateClick"
trigger="manually"
animation="slide-out-right"
reset
v-model="animateClick"
>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
</div>
<div>
<MDBBtn
color="primary"
class="me-5"
aria-controls="#animateHover"
@mouseenter="animateHover = true"
>
Animation on Hover
</MDBBtn>
<MDBAnimation
id="animateHover"
trigger="manually"
animation="slide-out-right"
reset
v-model="animateHover"
>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
</div>
</div>
</template>
<script>
import { MDBAnimation, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAnimation,
MDBBtn,
MDBIcon,
},
setup() {
const animateClick = ref(false);
const animateHover = ref(false);
return {
animateClick,
animateHover,
};
},
};
</script>
Start animation manually
Use repeat property and toggle v-model to start or stop the
animatio at the right moment.
<template>
<MDBAnimation
id="manualExample"
trigger="manually"
animation="fade-in"
repeat
reset
v-model="manualExample"
>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
<MDBBtn
color="primary"
class="ms-3"
aria-controls="#manualExample"
@click="manualExample = true"
>
Start
</MDBBtn>
<MDBBtn
color="primary"
class="ms-3"
aria-controls="#manualExample"
@click="manualExample = false"
>
Stop
</MDBBtn>
</template>
<script>
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAnimation,
MDBIcon,
MDBBtn,
},
setup() {
const manualExample = ref(false);
return {
manualExample,
};
},
};
</script>
Change animation type
You can change the element's animation type at any time by changing the
animation property.
<template>
<MDBAnimation
id="changeAnimation"
trigger="onLoad"
:animation="animationType"
:duration="1000"
repeat
reset
>
<MDBIcon icon="car-side" size="3x" />
</MDBAnimation>
<MDBBtn
color="primary"
class="ms-3"
aria-controls="#changeAnimation"
@click="
() => {
if (animationType === 'zoom-in') {
animationType = 'zoom-out';
} else {
animationType = 'zoom-in';
}
}
"
>
Start
</MDBBtn>
</template>
<script>
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBAnimation,
MDBIcon,
MDBBtn,
},
setup() {
const animationType = ref('zoom-in');
return { animationType };
},
};
</script>
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
delay property on some images to make it appears one by one.
<template>
<div class="text-center" style="height: 120vh">Scroll down</div>
<!--Grid row-->
<MDBRow>
<!--Grid column-->
<MDBCol lg="4" md="12" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in">
<img
src="https://mdbootstrap.com/img/new/standard/city/041.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
<!--Grid column-->
<MDBCol lg="4" md="6" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in" :delay="300">
<img
src="https://mdbootstrap.com/img/new/standard/city/042.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
<!--Grid column-->
<MDBCol lg="4" md="6" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in" :delay="500">
<img
src="https://mdbootstrap.com/img/new/standard/city/043.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
</MDBRow>
<!--Grid row-->
<!--Grid row-->
<MDBRow>
<!--Grid column-->
<MDBCol lg="4" md="12" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in">
<img
src="https://mdbootstrap.com/img/new/standard/city/044.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
<!--Grid column-->
<MDBCol lg="4" md="6" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in" :delay="300">
<img
src="https://mdbootstrap.com/img/new/standard/city/045.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
<!--Grid column-->
<MDBCol lg="4" md="6" class="mb-4">
<MDBAnimation trigger="onScroll" animation="fade-in" :delay="500">
<img
src="https://mdbootstrap.com/img/new/standard/city/046.webp"
class="img-fluid shadow-1-strong rounded"
/>
</MDBAnimation>
</MDBCol>
<!--Grid column-->
</MDBRow>
<!--Grid row-->
</template>
<script>
import { MDBAnimation, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
export default {
components: {
MDBAnimation,
MDBRow,
MDBCol,
},
};
</script>
List group
Click "Add" button to add a new item to the list.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<template>
<div class="d-flex">
<MDBListGroup style="width: 18rem">
<MDBListGroupItem
v-for="(item, index) in listGroupItems"
:key="item.text"
@click="e => removeListGroupItem(e, index)"
><MDBAnimation
trigger="onLoad"
:animation="item.animation"
reset
@start="handleStartItem"
@end="el => handleEndItem(el, item.status, index)"
>{{ item.text }}</MDBAnimation
></MDBListGroupItem
>
</MDBListGroup>
<div class="ms-3">
<MDBBtn color="primary" id="add" @click="addListGroupItem">add</MDBBtn>
</div>
</div>
</template>
<script>
import { MDBAnimation, MDBListGroup, MDBListGroupItem, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAnimation,
MDBListGroup,
MDBListGroupItem,
MDBBtn
},
setup() {
const listGroupItems = ref([
{
text: "Cras justo odio"
},
{
text: "Dapibus ac facilisis in"
},
{
text: "Vestibulum at eros"
}
]);
const addListGroupItem = () => {
const number = listGroupItems.value.length + 1;
const animation = number > 1 ? "slide-in-down" : "fade-in";
const item = {
text: `element ${number}`,
animation,
status: "added"
};
listGroupItems.value.push(item);
};
const removeListGroupItem = (e, index) => {
const target = e.target.closest("li");
const prevEl = target.previousElementSibling
? target.previousElementSibling
: target;
// animation change will cause animation to start
const animation = prevEl === target ? "fade-out" : "slide-out-up";
listGroupItems.value[index] = {
...listGroupItems.value[index],
animation,
status: "delete"
};
};
const handleStartItem = (el, status) => {
if (status === "delete") {
return;
}
if (el.parentNode?.previousElementSibling) {
el.parentNode.previousElementSibling.style.zIndex = "1";
}
};
const handleEndItem = (el, status, index) => {
if (el.parentNode?.previousElementSibling) {
el.parentNode.previousElementSibling.style.zIndex = "0";
}
if (status === "delete") {
listGroupItems.value.splice(index, 1);
}
};
return {
listGroupItems,
addListGroupItem,
removeListGroupItem,
handleStartItem,
handleEndItem
}
}
};
</script>
Animations - API
Import
<script>
import { MDBAnimations } from 'mdb-vue-ui-kit';
</script>
Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBAnimation element |
<MDBAnimation tag="div" />
|
trigger
|
String | 'onClick |
Set how to run the animation (onClick,
onLoad, onScroll, onHover, manually)
|
<MDBAnimation trigger="manually" />
|
v-model
|
Boolean | false |
Toggle animation when trigger="manually" |
<MDBAnimation trigger="manually" v-model="true" />
|
animation
|
String | 'fade-in' |
Changes animation |
<MDBAnimation animation="fade-out" />
|
reset
|
Boolean | false |
Set to reset the animation after it finishes |
<MDBAnimation reset />
|
duration
|
Number | 500 |
Set animation duration |
<MDBAnimation :duration="1000" />
|
delay
|
Number | 0 |
Set animation delay |
<MDBAnimation :delay="300" />
|
interval
|
Number | 0 |
Set the time interval between animations |
<MDBAnimation :interval="300" />
|
repeat
|
Boolean / Number | false |
Set animation repeat - set true to repeat infinity or enter the number of
times the animation should repeat
|
<MDBAnimation :repeat="3" />
|
direction
|
String | 'normal' |
Set animation direction |
<MDBAnimation direction="reverse" />
|
repeatOnScroll
|
Boolean | false |
Set to true to start the animation each time the item appears on the screen
|
<MDBAnimation trigger="onScroll" repeatOnScroll />
|
scrollOffset
|
Number | 0 |
Set offset for animate on scroll |
<MDBAnimation trigger="onScroll" :scrollOffset="200"
/>
|
showOnLoad
|
Boolean | true |
Define whether item should be visible on the screen before the animation runs. Set
false to start the scrolling animation immediately after the page loads.
NOTE: this will hide elements that are not currently visible on the screen and this may
have a negative impact on SEO
|
<MDBAnimation trigger="onScroll" :showOnLoad="200" />
|
Methods
| Name | Description | Example |
|---|---|---|
startAnimation
|
Start animating the element. Use on animation component ref element |
animationRef.startAnimation()
|
stopAnimation
|
Stop animating the element (e.g. if it has repeteable animation or interval). Use on animation component ref element |
animationRef.stopAnimation()
|
Events
| Name | Description |
|---|---|
hide
|
This event fires immediately when the element sets its visibility to hidden
|
show
|
This event fires immediately when the element sets its visibility to
visible
|
start
|
This event fires immediately after animation start |
end
|
This event fires immediately after animation end |