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.

Live Preview

Basic usage

Step 1: Import mdbAnimateOnScroll directive from 'mdbvue'

script


        <script>
          import { mdbAnimateOnScroll } from "mdbvue";
        </script>

Step 2: Add mdbAnimateOnScroll to directives

script


        <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
script


        <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
script


        <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

template
script


        <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>