Vue Bootstrap Animations
Vue Animations - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Vue Bootstrap animations are illusions of motions for web elements. +70 animations generated by CSS only, work properly on every browser.
Basic usage
Using our animation is simple.
Step 1: Add the class .animated
to the element you want to animate.
Step 2: Add one of the following classes:
.bounce
.flash
.pulse
.rubberBand
.shake
.headShake
.swing
.tada
.wobble
.jello
.bounceIn
.bounceInDown
.bounceInLeft
.bounceInRight
.bounceInUp
.bounceOut
.bounceOutDown
.bounceOutLeft
.bounceOutRight
.bounceOutUp
.fadeIn
.fadeInDown
.fadeInDownBig
.fadeInLeft
.fadeInLeftBig
.fadeInRight
.fadeInRightBig
.fadeInUp
.fadeInUpBig
.fadeOut
.fadeOutDown
.fadeOutDownBig
.fadeOutLeft
.fadeOutLeftBig
.fadeOutRight
.fadeOutRightBig
.fadeOutUp
.fadeOutUpBig
.flipInX
.flipInY
.flipOutX
.flipOutY
.lightSpeedIn
.lightSpeedOut
.rotateIn
.rotateInDownLeft
.rotateInDownRight
.rotateInUpLeft
.rotateInUpRight
.rotateOut
.rotateOutDownLeft
.rotateOutDownRight
.rotateOutUpLeft
.rotateOutUpRight
.hinge
.rollIn
.rollOut
.zoomIn
.zoomInDown
.zoomInLeft
.zoomInRight
.zoomInUp
.zoomOut
.zoomOutDown
.zoomOutLeft
.zoomOutRight
.zoomOutUp
.slideInDown
.slideInLeft
.slideInRight
.slideInUp
.slideOutDown
.slideOutLeft
.slideOutRight
.slideOutUp
Step 3 (additionally): You may also want to include the class infinite for an infinite loop.
<template>
<img class="animated bounce infinite" src="https://mdbootstrap.com/img/logo/mdb-transparent.webp">
</template>
Reveal Animations When Scrolling
Thanks to MDB you can easily launch an animation on page scroll - as soon as element is fully visible on the screen
<template>
<section>
<div class="mb-5">
<mdb-row class="mb-4">
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="{animation: 'bounceInLeft', delay: 300, position: 20}"
>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="'tada'"
>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="{animation: 'fadeInLeft', delay: 200}"
>
</mdb-col>
</mdb-row>
<mdb-row class="mb-4">
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="'fadeInRight'"
>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="'fadeIn'"
>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).webp"
alt="Sample image"
class="img-fluid"
v-animateOnScroll="'rollIn'"
>
</mdb-col>
</mdb-row>
</div>
</section>
</template>
<script>
import { mdbRow, mdbCol, animateOnScroll } from 'mdbvue';
export default {
name: 'AnimationsPage',
components: {
mdbRow,
mdbCol,
},
directives: {
animateOnScroll
}
}
</script>
Basic usage
Step 1: Import animateOnScroll directive from 'mdbvue'
<script>
import { animateOnScroll } from "mdbvue";
</script>
Step 2: Add animateOnScroll to directives
<script>
import { animateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
animateOnScroll
}
}
</script>
Step 3: Pick an animation style from the list of animations and set the directive equal to its name:
<template>
<img
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.webp"
alt="Transparent MDB Logo"
v-animateOnScroll="'fadeIn'"
>
</template>
<script>
import { animateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
animateOnScroll
}
}
</script>
Step 4: Customize your animation according to your needs by passing an object to a v-animateOnScroll directive. Apart from animation class you can specify delay or position - delay takes time as an argument (in miliseconds) while position is an additional percent of a view port height user has to scroll before an animation starts.
<template>
<img
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.webp"
alt="Transparent MDB Logo"
v-animateOnScroll="{animation: 'fadeInRight', delay: 100, position: 12}"
>
</template>
<script>
import { animateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
animateOnScroll
}
}
</script>