Animate On Scroll
Vue Bootstrap Animate on Scroll - Bootstrap 4 & Material Design
The mdb-animate-on-scroll directive allows to activate the
animation after the element was scrolled into the viewport.
Basic usage
Step 1: Import mdbAnimateOnScroll directive from 'mdbvue'
<script>
import { mdbAnimateOnScroll } from "mdbvue";
</script>
Step 2: Add mdbAnimateOnScroll to directives
<script>
import { mdbAnimateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
mdbAnimateOnScroll
}
};
</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.png"
alt="Transparent MDB Logo"
v-mdb-animate-on-scroll="'fadeIn'"
/>
</template>
<script>
import { mdbAnimateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
mdbAnimateOnScroll
}
};
</script>
Step 4: Customize your animation according to your needs by passing an object to a v-mdb-animate-on-scroll 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.png"
alt="Transparent MDB Logo"
v-mdb-animate-on-scroll="{animation: 'fadeInRight', delay: 100, position: 12}"
/>
</template>
<script>
import { mdbAnimateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
directives: {
mdbAnimateOnScroll
}
};
</script>
Example
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<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).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="{animation: 'bounceInLeft', delay: 300, position: 20}"
/>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="'tada'"
/>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="{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).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="'fadeInRight'"
/>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="'fadeIn'"
/>
</mdb-col>
<mdb-col>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
alt="Sample image"
class="img-fluid"
v-mdb-animate-on-scroll="'rollIn'"
/>
</mdb-col>
</mdb-row>
</div>
</section>
</template>
<script>
import { mdbRow, mdbCol, mdbAnimateOnScroll } from "mdbvue";
export default {
name: "AnimationsPage",
components: {
mdbRow,
mdbCol
},
directives: {
mdbAnimateOnScroll
}
};
</script>