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'

Show code

script

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

Step 2: Add mdbAnimateOnScroll to directives

Show code

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:

Show code

template
script

        
            
      <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 milliseconds) while position is an additional percent of a view port height user has to scroll before an animation starts.

Show code

template
script

        
            
      <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

Show code

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