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

tada

Launch

onLoad

Delay (in milliseconds)

Duration (in milliseconds)

Interval (in milliseconds)