Animations

Vue Bootstrap 5 Animations

Subtle and smooth MDB animations provide the user with a unique experience when interacting with UI. There are several dozen animations at your disposal along with many customization and implementation options.

Note: Read the API tab to find all available options and advanced customization

Move the mouse over the squares below to launch the animation.

fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
slide-down
slide-left
slide-right
slide-up
zoom-in
zoom-out
tada
pulse

Basic example

The easiest way to implement the animation is to wrap element you want to animate with MDBAnimation component. In the example below, we use the icon <MDBIcon icon="car-side" size="3x"/> and MDBAnimation properties reset animation="slide-right" to give it animation on click.

animation is an obligatory property to create animation for component

reset property lets you decide if the animation can be repeated

animation="slide-right" lets you specify which animation apply to the element. In the demo section above you can find available animations.

Click the car to start the animation.


Animation list

By default, you have access to the basic animations. However, you can also import _animate-extended.scss and compile extended animations.

Basic Animations

  • fade-in
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-in-up
  • fade-out
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-dDown
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • slide-down
  • slide-left
  • slide-right
  • slide-up
  • zoom-in
  • zoom-out
  • tada
  • pulse

Extended Animations

  • drop-in
  • drop-out
  • fly-in
  • fly-in-up
  • fly-in-down
  • fly-in-left
  • fly-in-right
  • fly-out
  • fly-out-up
  • fly-out-down
  • fly-out-left
  • fly-out-right
  • browse-in
  • browse-out
  • browse-out-left
  • browse-out-right
  • jiggle
  • flash
  • shake
  • glow

Launch options

There are several options for launching the animation.

On click

Animation on click is a default launching option, so it does not require any property.

On hover

Use trigger="onHover" to launch the animation on mouse hover.

On Load

Use trigger="onLoad" to start the animation after loading the page. Refresh your browser to see this effect.

Manually

Use trigger="manually" to initialize the component without animating, adding hover, clicking or scrolling events. To run the animation use the startAnimation method or psss truthy value to v-model property.

On scroll

Use trigger="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.

Repeat animation on scroll

If you want to launch the animation every time it's reached when scrolling use repeatOnScroll.

Show on load

If you use animation onScroll, by default all elements are visible when the page is loaded. They disappear and begin to animate after the first scroll. You can change this by setting :showOnLoad="false". However, remember that this may have a negative impact on SEO.


Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

Start animation manually

Use repeat property and toggle v-model to start or stop the animatio at the right moment.

Change animation type

You can change the element's animation type at any time by changing the animation property.

List group

Click "Add" button to add a new item to the list.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Animations - API


Import


        <script>
          import { 
            MDBAnimations
          } from 'mdb-vue-ui-kit';
        </script>
      

Properties

Name Type Default Description Example
tag String 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="div" />
trigger String 'onClick Set how to run the animation (onClick, onLoad, onScroll, onHover, manually) <MDBAnimation trigger="manually" />
v-model Boolean false Toggle animation when trigger="manually" <MDBAnimation trigger="manually" v-model="true" />
animation String 'fade-in' Changes animation <MDBAnimation animation="fade-out" />
reset Boolean false Set to reset the animation after it finishes <MDBAnimation reset />
duration Number 500 Set animation duration <MDBAnimation :duration="1000" />
delay Number 0 Set animation delay <MDBAnimation :delay="300" />
interval Number 0 Set the time interval between animations <MDBAnimation :interval="300" />
repeat Boolean / Number false Set animation repeat - set true to repeat infinity or enter the number of times the animation should repeat <MDBAnimation :repeat="3" />
direction String 'normal' Set animation direction <MDBAnimation direction="reverse" />
repeatOnScroll Boolean false Set to true to start the animation each time the item appears on the screen <MDBAnimation trigger="onScroll" repeatOnScroll />
scrollOffset Number 0 Set offset for animate on scroll <MDBAnimation trigger="onScroll" :scrollOffset="200" />
showOnLoad Boolean true Define whether item should be visible on the screen before the animation runs. Set false to start the scrolling animation immediately after the page loads. NOTE: this will hide elements that are not currently visible on the screen and this may have a negative impact on SEO <MDBAnimation trigger="onScroll" :showOnLoad="200" />

Methods

Name Description Example
startAnimation Start animating the element. Use on animation component ref element animationRef.startAnimation()
stopAnimation Stop animating the element (e.g. if it has repeteable animation or interval). Use on animation component ref element animationRef.stopAnimation()

Events

Name Description
hide This event fires immediately when the element sets its visibility to hidden
show This event fires immediately when the element sets its visibility to visible
start This event fires immediately after animation start
end This event fires immediately after animation end