Animations

React 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

To implement animation use MDBAnimation component. In the example below, we use the component with icon tag MDBAnimation tag="i" and props reset={true} animation="slide-out-right" duration={500} to give it animation on click.

reset={true} lets you decide if the animation can be repeated

duration={500} lets you specify duration of the animation

animation="slide-out-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 data-mdb-attribute.

On hover

Use start='onHover' to launch the animation on mouse hover.

On Load

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

On scroll

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

Repeat animation on scroll

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

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

Start animation manually

You can use the setTarget prop to start or stop the animation at the right moment.

Change animation type

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

List group

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

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

Accordion

Click the collapsible group of the accordion to see the animation.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Animations - API

Import


        import { 
          MDBAnimation,
        } from 'mdb-react-ui-kit';

Properties

MDBAnimation

Name Type Default Description Example
tag String 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="section" />
className String '' Add custom class to MDBAnimation <MDBAnimation className="class" />
animation String 'slide-right' Changes animation <MDBAnimation animation='fade' />
delay Number 0 Set the animation delay <MDBAnimation delay={200} />
reset Boolean true Allows to repeat the animation <MDBAnimation reset={false} />
duration Number 500 Set animation duration <MDBAnimation duration={1000} />
enableTarget Boolean false Enables activating an animation through an external element <MDBAnimation enableTarget />
infinite Boolean false Set the animation infinite <MDBAnimation infinite />
target Boolean false Set the external element to toggle animation <MDBAnimation target={animation} />
setTarget Function - Set the useState hook responsible for toggling the animation <MDBAnimation setTarget={setAnimation} />
repeatOnScroll Boolean false Set it to start the animation each time the item appears on the screen <MDBAnimation start='onScroll' repeatOnScroll />
start String 'onClick' Set how to run the animation (onClick, onLoad, onScroll, onHover) <MDBAnimation start='onHover' />