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.

        
            
          import React from 'react';
          import { 
            MDBAnimation,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBAnimation
                reset={true}
                tag='i'
                animation='slide-right'
                className='fas fa-car-side fa-3x'
                start='onClick'
                duration={500}
              />
            );
          }

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. 

        
            
              import React from 'react';
              import { 
                MDBAnimation,
              } from 'mdb-react-ui-kit';
              
              export default function App() {
                return (
                  <MDBAnimation
                    reset={true}
                    tag='i'
                    animation='slide-right'
                    className='fas fa-car-side fa-3x'
                    start='onClick'
                    duration={500}
                  />
                );
              }

On hover

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

        
            
            import React from 'react';
            import { 
              MDBAnimation,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBAnimation
                  reset={true}
                  tag='i'
                  animation='slide-right'
                  className='fas fa-car-side fa-3x'
                  start='onHover'
                  duration={500}
                />
              );
            }

On Load

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

        
            
              import React from 'react';
              import { 
                MDBAnimation,
              } from 'mdb-react-ui-kit';
              
              export default function App() {
                return (
                  <MDBAnimation
                    tag='i'
                    animation='zoom-in'
                    className='fas fa-car-side fa-3x'
                    start='onLoad'
                    duration={500}
                  />
                );
              }

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. 

        
            
          import React from 'react';
          import { 
            MDBAnimation,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <MDBAnimation
                reset={true}
                tag='i'
                animation='slide-in-left'
                className='fas fa-car-side fa-3x'
                start='onScroll'
                duration={500}
              />
            );
          }

Repeat animation on scroll

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

        
            
            import React from 'react';
            import { 
              MDBAnimation,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBAnimation
                  reset={true}
                  repeatOnScroll
                  tag='i'
                  animation='slide-in-left'
                  className='fas fa-car-side fa-3x'
                  start='onScroll'
                  duration={500}
                />
              );
            }

Examples

Examples of practical usage of the animation.

Launching via external element

Click or hover the button to launch the animation.

        
            
            import React, { useState } from 'react';
            import { 
              MDBAnimation,
              MDBBtn,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [clickAnimation, setClickAnimation] = useState(false);
              const [hoverAnimation, setHoverAnimation] = useState(false);

              const toggleClick = () => {
                setClickAnimation(!clickAnimation)
              }

              const toggleHover = () => {
                setHoverAnimation(!hoverAnimation)
              }

              return (
                <div className='d-flex justify-content-around'>
                  <div>
                    <MDBBtn className='me-5' onClick={toggleClick}>
                      Animation on Click
                    </MDBBtn>
                    <MDBAnimation
                      reset={true}
                      enableTarget
                      target={clickAnimation}
                      setTarget={setClickAnimation}
                      tag='i'
                      animation='slide-right'
                      className='fas fa-car-side fa-3x'
                      start='onClick'
                      duration={500}
                    />
                  </div>
                  <div>
                    <MDBBtn className='me-5' onMouseEnter={toggleHover}>
                      Animation on Hover
                    </MDBBtn>
                    <MDBAnimation
                      reset={true}
                      enableTarget
                      target={hoverAnimation}
                      setTarget={setHoverAnimation}
                      tag='i'
                      animation='slide-right'
                      className='fas fa-car-side fa-3x'
                      start='onHover'
                      duration={500}
                    />
                  </div>
                </div>
              );
            }

Start animation manually

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

        
            
            import React, { useState } from 'react';
            import { 
              MDBAnimation,
              MDBBtn,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [infiniteAnimation, setInifiniteAnimation] = useState(false);

              return (
                <div>
                  <MDBAnimation
                    infinite
                    enableTarget
                    target={infiniteAnimation}
                    setTarget={setInifiniteAnimation}
                    tag='i'
                    animation='fade-in'
                    className='fas fa-car-side fa-3x'
                    start='onClick'
                    duration={500}
                  />
                  <MDBBtn className='ms-3' onClick={() => setInifiniteAnimation(true)}>
                    start
                  </MDBBtn>
                  <MDBBtn className='ms-3' onClick={() => setInifiniteAnimation(false)}>
                    stop
                  </MDBBtn>
                </div>
              );
            }

Change animation type

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

        
            
            import React, { useState } from 'react';
            import { 
              MDBAnimation,
              MDBBtn,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [changeAnimation, setChangeAnimation] = useState(false);

              const toggleClick = () => {
                setChangeAnimation(!changeAnimation);
              }

              return (
                <>
                  <MDBAnimation
                    infinite
                    tag='i'
                    animation={changeAnimation ? 'zoom-in' : 'zoom-out'}
                    className='fas fa-car-side fa-3x'
                    start='onLoad'
                    duration={500}
                  />
                  <MDBBtn className='ms-3' onClick={toggleClick}>
                    change animation
                  </MDBBtn>
                </>
              );
            }

List group

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
        
            
            import React, { useState } from 'react';
            import { 
              MDBAnimation,
              MDBBtn,
              MDBListGroup,
              MDBListGroupItem,
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [list, setList] = useState(['Cras justo odio', 'Dapibus ac facilisis in', 'Vestibulum at eros']);

              const addListRow = () => {
                setList([...list, `element ${list.length}`]);
              };
            
              const removeListRow = (id: number) => {
                setList(list.filter((row, i) => i !== id));
              };

              return (
                <div className='d-flex'>
                  <MDBListGroup style={{ minWidth: '22rem' }}>
                    {list.map((el, i) => (
                      <MDBListGroupItem key={i} onClick={() => removeListRow(i)}>
                        <MDBAnimation animation='slide-in-down' start='onLoad'>
                          {el}
                        </MDBAnimation>
                      </MDBListGroupItem>
                    ))}
                  </MDBListGroup>
                  <div className='ms-3'>
                    <MDBBtn onClick={addListRow}>add</MDBBtn>
                  </div>
                </div>
              );
            }

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. 
        
            
              import React, { useState, useEffect } from 'react';
              import { 
                MDBAnimation,
                MDBBtn,
                MDBCard,
                MDBCardHeader,
                MDBCardBody,
                MDBCollapse,
              } from 'mdb-react-ui-kit';
              
              export default function App() {
                const [collapseAnimation, setCollapseAnimation] = useState([true, false, false]);
                const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');
  
                const toggleAccordion = (value: string) => {
                  value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');
                };
  
  
                useEffect(() => {
                  if (collapseOpened === 'accordionCollapse1') {
                    setCollapseAnimation([true, false, false]);
                  } else if (collapseOpened === 'accordionCollapse2') {
                    setCollapseAnimation([false, true, false]);
                  } else if (collapseOpened === 'accordionCollapse3') {
                    setCollapseAnimation([false, false, true]);
                  } else {
                    setCollapseAnimation([false, false, false]);
                  }
                }, [collapseOpened]);
  
                return (
                  <>
                    <MDBCard>
                      <MDBCardHeader background='white'>
                        <h2 className='mb-0'>
                          <MDBBtn
                            onClick={() => toggleAccordion('accordionCollapse1')}
                            block
                            className='btn-link text-start'
                            outline
                            style={{ border: 'none' }}
                          >
                            Collapsible Group Item #1
                          </MDBBtn>
                        </h2>
                      </MDBCardHeader>
                      <MDBAnimation
                        enableTarget
                        target={collapseAnimation[0]}
                        tag='div'
                        animation='fade-in-up'
                        duration={500}
                        delay={500}
                      >
                        <MDBCollapse id='accordionCollapse1' show={collapseOpened}>
                          <MDBCardBody>
                            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.
                          </MDBCardBody>
                        </MDBCollapse>
                      </MDBAnimation>
                    </MDBCard>
                    <MDBCard>
                      <MDBCardHeader background='white'>
                        <h2 className='mb-0'>
                          <MDBBtn
                            onClick={() => toggleAccordion('accordionCollapse2')}
                            block
                            className='btn-link text-start'
                            outline
                            style={{ border: 'none' }}
                          >
                            Collapsible Group Item #2
                          </MDBBtn>
                        </h2>
                      </MDBCardHeader>
                      <MDBAnimation
                        enableTarget
                        target={collapseAnimation[1]}
                        tag='div'
                        animation='fade-in-up'
                        duration={500}
                        delay={500}
                      >
                        <MDBCollapse id='accordionCollapse2' show={collapseOpened}>
                          <MDBCardBody>
                            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.
                          </MDBCardBody>
                        </MDBCollapse>
                      </MDBAnimation>
                    </MDBCard>
                    <MDBCard>
                      <MDBCardHeader background='white'>
                        <h2 className='mb-0'>
                          <MDBBtn
                            onClick={() => toggleAccordion('accordionCollapse3')}
                            block
                            className='btn-link text-start'
                            outline
                            style={{ border: 'none' }}
                          >
                            Collapsible Group Item #3
                          </MDBBtn>
                        </h2>
                      </MDBCardHeader>
                      <MDBAnimation
                        enableTarget
                        target={collapseAnimation[2]}
                        tag='div'
                        animation='fade-in-up'
                        duration={500}
                        delay={500}
                      >
                        <MDBCollapse id='accordionCollapse3' show={collapseOpened}>
                          <MDBCardBody>
                            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.
                          </MDBCardBody>
                        </MDBCollapse>
                      </MDBAnimation>
                    </MDBCard>
                  </>
                );
              }

Animations - API

Import

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

Properties

MDBAnimation

Name Type Default Description Example
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' | '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' 'slide-right' Animation type <MDBAnimation animation='fade' />
className string '' Add custom class to MDBAnimation <MDBAnimation className="class" />
delay number 0 Set the animation delay <MDBAnimation delay={200} />
duration number 500 Animation duration time <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 />
reset boolean true Allows to repeat the animation <MDBAnimation reset={false} />
target boolean false Animation state <MDBAnimation target={animation} />
setTarget Function - Change animation state <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 'onLoad' | 'onHover' | 'onClick' | 'onScroll' Animation start type <MDBAnimation start='onHover' />
tag string 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="section" />