Animations classes on scroll

Bootstrap 5 Animations classes on scroll component

Responsive Animations classes on scroll built with Bootstrap 5. Subtle and smooth MDB animations on scroll provide the user with a unique experience.


Basic example

The easiest way to implement the animation on scroll is to use data-mdb-attributes. In the example below, we use the icon <i class="fas fa-car-side fa-3x"></i> and add the attributes data-mdb-toggle="animation" data-mdb-animation="slide-in-left".

data-mdb-toggle="animation" is an obligatory attribute for each animation.

data-mdb-animation=""slide-in-left" lets you specify which animation apply to the element. In the Animations Docs you can find available animations.

Use data-mdb-animation-start="onScroll" to launch the animation when you scroll the page and reach the element.

Notice that the animation will launch only once - even if you reach it when scrolling multiple times.

        
            
        <i
        class="fas fa-car-side fa-3x"  
        data-mdb-toggle="animation"        
        data-mdb-animation="slide-in-left"
        data-mdb-animation-start="onScroll"        
      ></i>
        
        
    

Repeat animation on scroll

If you want to launch the animation every time it's reached when scrolling use data-mdb-animation-on-scroll="repeat".

        
            
          <i
            class="fas fa-car-side fa-3x"  
            data-mdb-animation-init
            data-mdb-toggle="animation"        
            data-mdb-animation="slide-in-left"
            data-mdb-animation-start="onScroll"
            data-mdb-animation-on-scroll="repeat"        
          ></i>