Edit these docs

Animate On Scroll

Vue Bootstrap Animate on Scroll - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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>
          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.webp"
            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.webp"
            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

Sample image
Sample image
Sample image
Sample image
Sample image
Sample image 

        <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-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).webp"
                    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).webp"
                    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).webp"
                    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).webp"
                    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).webp"
                    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>