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.
fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
slide-down
slide-left
slide-right
slide-up
zoom-in
zoom-out
tada
pulse
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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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 pass 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="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(null);
return {
manual,
};
},
};
</script>
<script setup lang="ts">
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const manual = ref<InstanceType<typeof MDBAnimation> | null>(null);
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBBtn, MDBIcon } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const animateClick = ref(false);
const animateHover = ref(false);
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const manualExample = ref(false);
</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>
<script setup lang="ts">
import { MDBAnimation, MDBIcon, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const animationType = ref('zoom-in');
</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>
<script setup lang="ts">
import { MDBAnimation, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</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>
<script setup lang="ts">
import { MDBAnimation, MDBListGroup, MDBListGroupItem, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const listGroupItems = ref<{[props: string]: string}[]>([
{
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: Event, index: number) => {
const target = (e.target as HTMLElement).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: HTMLElement, status: string) => {
if (status === "delete") {
return;
}
if (el.previousElementSibling) {
const element = el.previousElementSibling as HTMLElement;
element.style.zIndex = "1";
}
};
const handleEndItem = (el: HTMLElement, status: string, index: number) => {
if (el.previousElementSibling) {
const element = el.previousElementSibling as HTMLElement;
element.style.zIndex = "0";
}
if (status === "delete") {
listGroupItems.value.splice(index, 1);
}
};
</script>
Accordion
Click the collapsible group of the accordion to see the animation.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
<template>
<MDBAccordion v-model="activeItem">
<MDBAccordionItem
headerTitle="Accordion Item #1"
collapseId="collapseOne"
@click="animation = !animation"
>
<MDBAnimation
reset
trigger="manually"
v-model="animation"
animation="fade-in-up"
:duration="500"
:delay="500"
>
<strong>This is the first item's accordion body.</strong> It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
MDBAccordionItem, though the transition does limit overflow.
</MDBAnimation>
</MDBAccordionItem>
<MDBAccordionItem
headerTitle="Accordion Item #2"
collapseId="collapseTwo"
@click="animation = !animation"
>
<MDBAnimation
reset
trigger="manually"
v-model="animation"
animation="fade-in-up"
:duration="500"
:delay="500"
>
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
MDBAccordionItem, though the transition does limit overflow.
</MDBAnimation>
</MDBAccordionItem>
<MDBAccordionItem
headerTitle="Accordion Item #3"
collapseId="collapseThree"
@click="animation = !animation"
>
<MDBAnimation
reset
trigger="manually"
v-model="animation"
animation="fade-in-up"
:duration="500"
:delay="500"
>
<strong>This is the third item's accordion body.</strong> It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
MDBAccordionItem, though the transition does limit overflow.
</MDBAnimation>
</MDBAccordionItem>
</MDBAccordion>
</template>
<script>
import { MDBAnimation, MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBAnimation,
MDBAccordion,
MDBAccordionItem,
},
setup() {
const activeItem = ref("collapseOne");
const animation = ref(false);
return {
activeItem,
animation
}
}
};
</script>
<script setup lang="ts">
import { MDBAnimation, MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
import { ref } from "vue";
const activeItem = ref("collapseOne");
const animation = ref(false);
</script>
Animations - API
Import
<script>
import { MDBAnimations } from 'mdb-vue-ui-kit';
</script>
Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
beginHidden
|
Boolean | false |
Makes the animating element hidden before the animation starts |
<MDBAnimation beginHidden />
|
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()
|
<template>
<MDBAnimation
ref="manual"
v-model="isTriggered"
tag="i"
class="fas fa-car-side fa-3x"
trigger="manually"
reset
animation="slide-right"
/>
<MDBBtn
style="width: 200px"
color="primary"
@click="manualStartAnimation"
>Start with 'startAnimation' function
</MDBBtn>
</template>
<script>
import { MDBAnimation, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from "vue";
export default {
components: {
MDBAnimation,
MDBBtn
},
setup() {
const manual = ref(null);
const isTriggered = ref(false);
const manualStartAnimation = () => manual.value.startAnimation();
return {
manual,
isTriggered,
manualStartAnimation
}
}
}
</script>
<script setup lang="ts">
import { MDBAnimation, MDBBtn } from 'mdb-vue-ui-kit';
import { ref } from "vue";
const manual = ref<InstanceType<typeof MDBAnimation> | null>(null);
const isTriggered = ref(false);
const manualStartAnimation = () => manual.value?.startAnimation();
</script>
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 |
<template>
<MDBAnimation v-model="isTriggered" @hide="doSomething" />
</template>
CSS variables
As part of MDB’s evolving CSS variables approach, animations now uses local CSS variables on
.animation for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.
// .animation
--#{$prefix}animation-delay-1s: #{$animation-delay-1s};
--#{$prefix}animation-delay-2s: #{$animation-delay-3s};
--#{$prefix}animation-delay-3s: #{$animation-delay-3s};
--#{$prefix}animation-delay-4s: #{$animation-delay-4s};
--#{$prefix}animation-delay-5s: #{$animation-delay-5s};
--#{$prefix}animation-fast-duration: #{$animation-fast-duration};
--#{$prefix}animation-faster-duration: #{$animation-faster-duration};
--#{$prefix}animation-slow-duration: #{$animation-slow-duration};
--#{$prefix}animation-slower-duration: #{$animation-slower-duration};
// .fade-in-down {
--#{$prefix}animation-fade-in-down-transform-from: #{$animation-fade-in-down-transform-from};
--#{$prefix}animation-fade-in-down-transform-to: #{$animation-fade-in-down-transform-to};
// .fade-in-left
--#{$prefix}animation-fade-in-left-transform-from: #{$animation-fade-in-left-transform-from};
--#{$prefix}animation-fade-in-left-transform-to: #{$animation-fade-in-left-transform-to};
// .fade-in-right
--#{$prefix}animation-fade-in-right-transform-from: #{$animation-fade-in-right-transform-from};
--#{$prefix}animation-fade-in-right-transform-to: #{$animation-fade-in-right-transform-to};
// .fade-in-up
--#{$prefix}animation-fade-in-up-transform-from: #{$animation-fade-in-up-transform-from};
--#{$prefix}animation-fade-in-up-transform-to: #{$animation-fade-in-up-transform-to};
// .fade-out-down
--#{$prefix}animation-fade-out-down-transform-to: #{$animation-fade-out-down-transform-to};
// .fade-out-left
--#{$prefix}animation-fade-out-left-transform-to: #{$animation-fade-out-left-transform-to};
// .fade-out-right
--#{$prefix}animation-fade-out-right-transform-to: #{$animation-fade-out-right-transform-to};
// .fade-out-up
--#{$prefix}animation-fade-out-up-transform-to: #{$animation-fade-out-up-transform-to};
// .slide-in-down
--#{$prefix}animation-slide-in-down-transform-from: #{$animation-slide-in-down-transform-from};
--#{$prefix}animation-slide-in-down-transform-to: #{$animation-slide-in-down-transform-to};
// .slide-in-left
--#{$prefix}animation-slide-in-left-transform-from: #{$animation-slide-in-left-transform-from};
--#{$prefix}animation-slide-in-left-transform-to: #{$animation-slide-in-left-transform-to};
// .slide-in-right
--#{$prefix}animation-slide-in-right-transform-from: #{$animation-slide-in-right-transform-from};
--#{$prefix}animation-slide-in-right-transform-to: #{$animation-slide-in-right-transform-to};
// .slide-in-up
--#{$prefix}animation-slide-in-up-transform-from: #{$animation-slide-in-up-transform-from};
--#{$prefix}animation-slide-in-up-transform-to: #{$animation-slide-in-up-transform-to};
// .slide-out-down
--#{$prefix}animation-slide-out-down-transform-from: #{$animation-slide-out-down-transform-from};
--#{$prefix}animation-slide-out-down-transform-to: #{$animation-slide-out-down-transform-to};
// .slide-out-left
--#{$prefix}animation-slide-out-left-transform-from: #{$animation-slide-out-left-transform-from};
--#{$prefix}animation-slide-out-left-transform-to: #{$animation-slide-out-left-transform-to};
// .slide-out-right
--#{$prefix}animation-slide-out-right-transform-from: #{$animation-slide-out-right-transform-from};
--#{$prefix}animation-slide-out-right-transform-to: #{$animation-slide-out-right-transform-to};
// .slide-out-up
--#{$prefix}animation-slide-out-up-transform-from: #{$animation-slide-out-up-transform-from};
--#{$prefix}animation-slide-out-up-transform-to: #{$animation-slide-out-up-transform-to};
// .slide-down
--#{$prefix}animation-slide-down-transform-from: #{$animation-slide-down-transform-from};
--#{$prefix}animation-slide-down-transform-to: #{$animation-slide-down-transform-to};
// .slide-left
--#{$prefix}animation-slide-left-transform-from: #{$animation-slide-left-transform-from};
--#{$prefix}animation-slide-left-transform-to: #{$animation-slide-left-transform-to};
// .slide-right
--#{$prefix}animation-slide-right-transform-from: #{$animation-slide-right-transform-from};
--#{$prefix}animation-slide-right-transform-to: #{$animation-slide-right-transform-to};
// .slide-up
--#{$prefix}animation-slide-up-transform-from: #{$animation-slide-up-transform-from};
--#{$prefix}animation-slide-up-transform-to: #{$animation-slide-up-transform-to};
// .zoom-in
--#{$prefix}animation-zoom-in-transform-from: #{$animation-zoom-in-transform-from};
// .zoom-out
--#{$prefix}animation-zoom-out-transform-50: #{$animation-zoom-out-transform-50};
// .tada
--#{$prefix}animation-tada-transform-from: #{$animation-tada-transform-from};
--#{$prefix}animation-tada-transform-20: #{$animation-tada-transform-20};
--#{$prefix}animation-tada-transform-90: #{$animation-tada-transform-90};
--#{$prefix}animation-tada-transform-80: #{$animation-tada-transform-80};
--#{$prefix}animation-tada-transform-to: #{$animation-tada-transform-to};
// .pulse
--#{$prefix}animation-pulse-transform-from: #{$animation-pulse-transform-from};
--#{$prefix}animation-pulse-transform-50: #{$animation-pulse-transform-50};
--#{$prefix}animation-pulse-transform-to: #{$animation-pulse-transform-to};
// .drop-in
--#{$prefix}animation-drop-in-transform-0: #{$animation-drop-in-transform-0};
--#{$prefix}animation-drop-in-transform-100: #{$animation-drop-in-transform-100};
--#{$prefix}animation-drop-in-timing-function: #{$animation-drop-in-timing-function};
// .drop-out
--#{$prefix}animation-drop-out-transform-0: #{$animation-drop-out-transform-0};
--#{$prefix}animation-drop-out-transform-100: #{$animation-drop-out-transform-100};
--#{$prefix}animation-drop-out-timing-function: #{$animation-drop-out-timing-function};
// .fly-in
--#{$prefix}animation-fly-in-transform-0: #{$animation-fly-in-transform-0};
--#{$prefix}animation-fly-in-transform-20: #{$animation-fly-in-transform-20};
--#{$prefix}animation-fly-in-transform-40: #{$animation-fly-in-transform-40};
--#{$prefix}animation-fly-in-transform-60: #{$animation-fly-in-transform-60};
--#{$prefix}animation-fly-in-transform-80: #{$animation-fly-in-transform-80};
--#{$prefix}animation-fly-in-transform-100: #{$animation-fly-in-transform-100};
--#{$prefix}animation-fly-in-timing-function: #{$animation-fly-in-timing-function};
// .fly-in-up
--#{$prefix}animation-fly-in-up-transform-0: #{$animation-fly-in-up-transform-0};
--#{$prefix}animation-fly-in-up-transform-60: #{$animation-fly-in-up-transform-60};
--#{$prefix}animation-fly-in-up-transform-75: #{$animation-fly-in-up-transform-75};
--#{$prefix}animation-fly-in-up-transform-90: #{$animation-fly-in-up-transform-90};
--#{$prefix}animation-fly-in-up-transform-100: #{$animation-fly-in-up-transform-100};
--#{$prefix}animation-fly-in-up-timing-function: #{$animation-fly-in-up-timing-function};
// .fly-in-down
--#{$prefix}animation-fly-in-down-transform-0: #{$animation-fly-in-down-transform-0};
--#{$prefix}animation-fly-in-down-transform-60: #{$animation-fly-in-down-transform-60};
--#{$prefix}animation-fly-in-down-transform-75: #{$animation-fly-in-down-transform-75};
--#{$prefix}animation-fly-in-down-transform-90: #{$animation-fly-in-down-transform-90};
--#{$prefix}animation-fly-in-down-timing-function: #{$animation-fly-in-down-timing-function};
// .fly-in-left
--#{$prefix}animation-fly-in-left-transform-0: #{$animation-fly-in-left-transform-0};
--#{$prefix}animation-fly-in-left-transform-60: #{$animation-fly-in-left-transform-60};
--#{$prefix}animation-fly-in-left-transform-75: #{$animation-fly-in-left-transform-75};
--#{$prefix}animation-fly-in-left-transform-90: #{$animation-fly-in-left-transform-90};
--#{$prefix}animation-fly-in-left-timing-function: #{$animation-fly-in-left-timing-function};
// .fly-in-right
--#{$prefix}animation-fly-in-right-transform-0: #{$animation-fly-in-right-transform-0};
--#{$prefix}animation-fly-in-right-transform-60: #{$animation-fly-in-right-transform-60};
--#{$prefix}animation-fly-in-right-transform-75: #{$animation-fly-in-right-transform-75};
--#{$prefix}animation-fly-in-right-transform-90: #{$animation-fly-in-right-transform-90};
--#{$prefix}animation-fly-in-right-timing-function: #{$animation-fly-in-right-timing-function};
// .fly-out
--#{$prefix}animation-fly-out-transform-20: #{$animation-fly-out-transform-20};
--#{$prefix}animation-fly-out-transform-55: #{$animation-fly-out-transform-55};
--#{$prefix}animation-fly-out-transform-100: #{$animation-fly-out-transform-100};
--#{$prefix}animation-fly-out-timing-function: #{$animation-fly-out-timing-function};
// .fly-out-up
--#{$prefix}animation-fly-out-up-transform-20: #{$animation-fly-out-up-transform-20};
--#{$prefix}animation-fly-out-up-transform-45: #{$animation-fly-out-up-transform-45};
--#{$prefix}animation-fly-out-up-transform-100: #{$animation-fly-out-up-transform-100};
--#{$prefix}animation-fly-out-up-timing-function: #{$animation-fly-out-up-timing-function};
// .fly-out-down
--#{$prefix}animation-fly-out-down-transform-20: #{$animation-fly-out-down-transform-20};
--#{$prefix}animation-fly-out-down-transform-45: #{$animation-fly-out-down-transform-45};
--#{$prefix}animation-fly-out-down-transform-100: #{$animation-fly-out-down-transform-100};
--#{$prefix}animation-fly-out-down-timing-function: #{$animation-fly-out-down-timing-function};
// .fly-out-left
--#{$prefix}animation-fly-out-left-transform-20: #{$animation-fly-out-left-transform-20};
--#{$prefix}animation-fly-out-left-transform-100: #{$animation-fly-out-left-transform-100};
--#{$prefix}animation-fly-out-left-timing-function: #{$animation-fly-out-left-timing-function};
// .fly-out-right
--#{$prefix}animation-fly-out-right-transform-20: #{$animation-fly-out-right-transform-20};
--#{$prefix}animation-fly-out-right-transform-100: #{$animation-fly-out-right-transform-100};
--#{$prefix}animation-fly-out-right-timing-function: #{$animation-fly-out-right-timing-function};
// .browse-in
--#{$prefix}animation-browse-in-transform-0: #{$animation-browse-in-transform-0};
--#{$prefix}animation-browse-in-transform-10: #{$animation-browse-in-transform-10};
--#{$prefix}animation-browse-in-transform-80: #{$animation-browse-in-transform-80};
--#{$prefix}animation-browse-in-transform-100: #{$animation-browse-in-transform-100};
// .browse-out, .browse-out-left
--#{$prefix}animation-browse-out-left-transform-0: #{$animation-browse-out-left-transform-0};
--#{$prefix}animation-browse-out-left-transform-50: #{$animation-browse-out-left-transform-50};
--#{$prefix}animation-browse-out-left-transform-100: #{$animation-browse-out-left-transform-100};
// .browse-out-right
--#{$prefix}animation-browse-out-right-transform-0: #{$animation-browse-out-right-transform-0};
--#{$prefix}animation-browse-out-right-transform-50: #{$animation-browse-out-right-transform-50};
--#{$prefix}animation-browse-out-right-transform-100: #{$animation-browse-out-right-transform-100};
// .jiggle
--#{$prefix}animation-jiggle-transform-0: #{$animation-jiggle-transform-0};
--#{$prefix}animation-jiggle-transform-30: #{$animation-jiggle-transform-30};
--#{$prefix}animation-jiggle-transform-40: #{$animation-jiggle-transform-40};
--#{$prefix}animation-jiggle-transform-50: #{$animation-jiggle-transform-50};
--#{$prefix}animation-jiggle-transform-65: #{$animation-jiggle-transform-65};
--#{$prefix}animation-jiggle-transform-75: #{$animation-jiggle-transform-75};
--#{$prefix}animation-jiggle-transform-100: #{$animation-jiggle-transform-100};
// .shake
--#{$prefix}animation-shake-transform-100: #{$animation-shake-transform-100};
--#{$prefix}animation-shake-transform-90: #{$animation-shake-transform-90};
--#{$prefix}animation-shake-transform-80: #{$animation-shake-transform-80};
// .glow
--#{$prefix}animation-glow-bg-0: #{$animation-glow-bg-0};
--#{$prefix}animation-glow-bg-30: #{$animation-glow-bg-30};
--#{$prefix}animation-glow-bg-100: #{$animation-glow-bg-100};
SCSS variables
$animation-delay-1s: 1s;
$animation-delay-2s: 2s;
$animation-delay-3s: 3s;
$animation-delay-4s: 4s;
$animation-delay-5s: 5s;
$animation-fast-duration: 800ms;
$animation-faster-duration: 500ms;
$animation-slow-duration: 2s;
$animation-slower-duration: 3s;
$animation-fade-in-down-transform-from: translate3d(0, -100%, 0);
$animation-fade-in-down-transform-to: translate3d(0, 0, 0);
$animation-fade-in-left-transform-from: translate3d(-100%, 0, 0);
$animation-fade-in-left-transform-to: translate3d(0, 0, 0);
$animation-fade-in-right-transform-from: translate3d(100%, 0, 0);
$animation-fade-in-right-transform-to: translate3d(0, 0, 0);
$animation-fade-in-up-transform-from: translate3d(0, 100%, 0);
$animation-fade-in-up-transform-to: translate3d(0, 0, 0);
$animation-fade-out-down-transform-to: translate3d(0, 100%, 0);
$animation-fade-out-left-transform-to: translate3d(-100%, 0, 0);
$animation-fade-out-right-transform-to: translate3d(100%, 0, 0);
$animation-fade-out-up-transform-to: translate3d(0, -100%, 0);
$animation-slide-in-down-transform-from: translate3d(0, -100%, 0);
$animation-slide-in-down-transform-to: translate3d(0, 0, 0);
$animation-slide-in-left-transform-from: translate3d(-100%, 0, 0);
$animation-slide-in-left-transform-to: translate3d(0, 0, 0);
$animation-slide-in-right-transform-from: translate3d(100%, 0, 0);
$animation-slide-in-right-transform-to: translate3d(0, 0, 0);
$animation-slide-in-up-transform-from: translate3d(0, 100%, 0);
$animation-slide-in-up-transform-to: translate3d(0, 0, 0);
$animation-slide-out-down-transform-from: translate3d(0, 0, 0);
$animation-slide-out-down-transform-to: translate3d(0, 100%, 0);
$animation-slide-out-left-transform-from: translate3d(0, 0, 0);
$animation-slide-out-left-transform-to: translate3d(-100%, 0, 0);
$animation-slide-out-right-transform-from: translate3d(0, 0, 0);
$animation-slide-out-right-transform-to: translate3d(100%, 0, 0);
$animation-slide-out-up-transform-from: translate3d(0, 0, 0);
$animation-slide-out-up-transform-to: translate3d(0, -100%, 0);
$animation-slide-down-transform-from: translate3d(0, 0, 0);
$animation-slide-down-transform-to: translate3d(0, 100%, 0);
$animation-slide-left-transform-from: translate3d(0, 0, 0);
$animation-slide-left-transform-to: translate3d(-100%, 0, 0);
$animation-slide-right-transform-from: translate3d(0, 0, 0);
$animation-slide-right-transform-to: translate3d(100%, 0, 0);
$animation-slide-up-transform-from: translate3d(0, 0, 0);
$animation-slide-up-transform-to: translate3d(0, -100%, 0);
$animation-zoom-in-transform-from: scale3d(0.3, 0.3, 0.3);
$animation-zoom-out-transform-50: scale3d(0.3, 0.3, 0.3);
$animation-tada-transform-from: scale3d(1, 1, 1);
$animation-tada-transform-20: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
$animation-tada-transform-90: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
$animation-tada-transform-80: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
$animation-tada-transform-to: scale3d(1, 1, 1);
$animation-pulse-transform-from: scale3d(1, 1, 1);
$animation-pulse-transform-50: scale3d(1.05, 1.05, 1.05);
$animation-pulse-transform-to: scale3d(1, 1, 1);
// Animations extended
$animation-drop-in-transform-0: scale(0);
$animation-drop-in-transform-100: scale(1);
$animation-drop-in-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
$animation-drop-out-transform-0: scale(1);
$animation-drop-out-transform-100: scale(0);
$animation-drop-out-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
$animation-fly-in-transform-0: scale3d(0.3, 0.3, 0.3);
$animation-fly-in-transform-20: scale3d(1.1, 1.1, 1.1);
$animation-fly-in-transform-40: scale3d(0.9, 0.9, 0.9);
$animation-fly-in-transform-60: scale3d(1.03, 1.03, 1.03);
$animation-fly-in-transform-80: scale3d(0.97, 0.97, 0.97);
$animation-fly-in-transform-100: scale3d(1, 1, 1);
$animation-fly-in-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-in-up-transform-0: translate3d(0, 1500px, 0);
$animation-fly-in-up-transform-60: translate3d(0, -20px, 0);
$animation-fly-in-up-transform-75: translate3d(0, 10px, 0);
$animation-fly-in-up-transform-90: translate3d(0, -5px, 0);
$animation-fly-in-up-transform-100: translate3d(0, 0, 0);
$animation-fly-in-up-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-in-down-transform-0: translate3d(0, -1500px, 0);
$animation-fly-in-down-transform-60: translate3d(0, 25px, 0);
$animation-fly-in-down-transform-75: translate3d(0, -10px, 0);
$animation-fly-in-down-transform-90: translate3d(0, 5px, 0);
$animation-fly-in-down-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-in-left-transform-0: translate3d(1500px, 0, 0);
$animation-fly-in-left-transform-60: translate3d(-25px, 0, 0);
$animation-fly-in-left-transform-75: translate3d(10px, 0, 0);
$animation-fly-in-left-transform-90: translate3d(-5px, 0, 0);
$animation-fly-in-left-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-in-right-transform-0: translate3d(-1500px, 0, 0);
$animation-fly-in-right-transform-60: translate3d(25px, 0, 0);
$animation-fly-in-right-transform-75: translate3d(-10px, 0, 0);
$animation-fly-in-right-transform-90: translate3d(5px, 0, 0);
$animation-fly-in-right-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-out-transform-20: scale3d(0.9, 0.9, 0.9);
$animation-fly-out-transform-55: scale3d(1.1, 1.1, 1.1);
$animation-fly-out-transform-100: scale3d(0.3, 0.3, 0.3);
$animation-fly-out-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-out-up-transform-20: translate3d(0, 10px, 0);
$animation-fly-out-up-transform-45: translate3d(0, -20px, 0);
$animation-fly-out-up-transform-100: translate3d(0, 2000px, 0);
$animation-fly-out-up-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-out-down-transform-20: translate3d(0, -10px, 0);
$animation-fly-out-down-transform-45: translate3d(0, 20px, 0);
$animation-fly-out-down-transform-100: translate3d(0, -2000px, 0);
$animation-fly-out-down-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-out-left-transform-20: translate3d(-20px, 0, 0);
$animation-fly-out-left-transform-100: translate3d(2000px, 0, 0);
$animation-fly-out-left-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-fly-out-right-transform-20: translate3d(20px, 0, 0);
$animation-fly-out-right-transform-100: translate3d(-2000px, 0, 0);
$animation-fly-out-right-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
$animation-browse-in-transform-0: scale(0.8) translateZ(0px);
$animation-browse-in-transform-10: scale(0.8) translateZ(0px);
$animation-browse-in-transform-80: scale(1.05) translateZ(0px);
$animation-browse-in-transform-100: scale(1) translateZ(0px);
$animation-browse-out-left-transform-0: translateX(0%) rotateY(0deg) rotateX(0deg);
$animation-browse-out-left-transform-50: translateX(-105%) rotateY(35deg) rotateX(10deg)
translateZ(-10px);
$animation-browse-out-left-transform-100: translateX(0%) rotateY(0deg) rotateX(0deg)
translateZ(-10px);
$animation-browse-out-right-transform-0: translateX(0%) rotateY(0deg) rotateX(0deg);
$animation-browse-out-right-transform-50: translateX(105%) rotateY(35deg) rotateX(10deg)
translateZ(-10px);
$animation-browse-out-right-transform-100: translateX(0%) rotateY(0deg) rotateX(0deg)
translateZ(-10px);
$animation-jiggle-transform-0: scale3d(1, 1, 1);
$animation-jiggle-transform-30: scale3d(1.25, 0.75, 1);
$animation-jiggle-transform-40: scale3d(0.75, 1.25, 1);
$animation-jiggle-transform-50: scale3d(1.15, 0.85, 1);
$animation-jiggle-transform-65: scale3d(0.95, 1.05, 1);
$animation-jiggle-transform-75: scale3d(1.05, 0.95, 1);
$animation-jiggle-transform-100: scale3d(1, 1, 1);
$animation-flash-duration: 750ms;
$animation-shake-transform-100: translateX(0);
$animation-shake-transform-90: translateX(-10px);
$animation-shake-transform-80: translateX(10px);
$animation-glow-bg-0: #fcfcfd;
$animation-glow-bg-30: #fff6cd;
$animation-glow-bg-100: #fcfcfd;