MDBootstrap Animations generator

MDB Logo
        
            
                    const element = document.getElementById("animationDemo");
                    const animate = new mdb.Animate(element, {
                      animation: "tada",
                      animationStart: "onLoad",
                      animationDelay: "0",
                      animationDuration: "500",
                      animationReverse: "false",
                      animationRepeat: "false",
                      animationInterval: "0",
                    });
                    animate.init();
                  
        
    
        
            
                    <img
                      id="animationDemo"
                      data-mdb-toggle="animation"
                      data-mdb-animation-reset="true"
                      src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/tools/builders/animations/assets/logo.webp"
                      class="shadow-1-strong rounded-circle"
                      style="width: 120px"
                    />
                  
        
    

How to use it?

1. You need MDB Pro package

2. Create the animation you like

3. Copy the generated code and paste it into the MDB project

Docs

Animation

Launch

Delay (in milliseconds)

Duration (in milliseconds)

Interval (in milliseconds)