Animations

Animations - Bootstrap 5 & Material Design 2.0

Animations are illusions of motions for web elements.

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 use data-mdb-attributes. In the example below, we use the icon <i class="fas fa-car-side fa-3x"></i> and add the attributes data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-out-right" to give it animation on click.

data-mdb-toggle="animation" is an obligatory attribute for each animation.

data-mdb-animation-reset="true" lets you decide if the animation can be repeated

data-mdb-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 data-mdb-attribute.

On hover

Use data-mdb-animation-start="onHover" to launch the animation on mouse hover.

On Load

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

Manually

Use data-mdb-animation-start="manually" to initialize the component without animating, adding hover, clicking or scrolling events and use the animationStart method when you want to start the animation.

On scroll

Use data-mdb-animation-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 data-mdb-animation-on-scroll="repeat".

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 data-mdb-animation-show-on-load="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 animationStart and animationStop methods to start or stop the animation at the right moment.


                          const manuallyEl = document.getElementById('manually-example'); const
                          manuallyBtnStart = document.getElementById('manually-btn-start'); const
                          manuallyBtnStop = document.getElementById('manually-btn-stop'); const
                          manually = new mdb.Animate(manuallyEl, { animation: 'fade-in',
                          animationStart: 'manually', animationRepeat: true, });
                          manuallyBtnStart.addEventListener('click', () => {
                          manually.startAnimation(); }); manuallyBtnStop.addEventListener('click',
                          () => { manually.stopAnimation(); });

Change animation type

You can change the element's animation type at any time using the changeAnimationType() method.


                          const changeAnimationEl =
                          document.getElementById('change-animation-type-example'); const
                          changeAnimationBtn = document.getElementById('change-animation-type-btn');
                          let animation = 'zoom-in'; const changeAnimation = new
                          mdb.Animate(changeAnimationEl, { animation: animation, animationStart:
                          'onLoad', animationDuration: 1000, animationRepeat: true, });
                          changeAnimation.init(); changeAnimationBtn.addEventListener('click', () =>
                          { if (animation === 'zoom-in') { animation = 'zoom-out' } else { animation
                          = 'zoom-in' } changeAnimation.stopAnimation();
                          changeAnimation.changeAnimationType(animation);
                          changeAnimation.startAnimation(); })

Fading gallery

With animation on scroll you can create an impressive gallery that will appear smoothly step by step.

In the example below, we additionally use data-mdb-animation-delay attribute on some images to make it appears one by one.

List group

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros


                          
                            
                              
                                Cras justo odio
                                Dapibus ac facilisis in
                                Vestibulum at eros


                          let elementNumber = 1;
                          const bindRemoveClickEvent = (el) => {
                            const element = el;
                            element.addEventListener('click', () => {
                              const prevElement = element.previousElementSibling
                                ? element.previousElementSibling
                                : element;
                              const animation = element === prevElement ? 'fade-out' : 'slide-out-up';
                              prevElement.style.zIndex = '1';
                              element.addEventListener('animationend', () => {
                                element.remove();
                                prevElement.style.zIndex = '0';
                              });
                              element.classList.add('animation', 'faster', animation);
                            });
                          };
                          const addNewOption = () => {
                            const element = document.getElementById('example-list');
                            const newElement = document.createElement('li');
                            const lastElement = element.lastElementChild || element;
                            const animation = element === lastElement ? 'fade-in' : 'slide-in-down';
                            newElement.innerText = `element ${elementNumber}`;
                            lastElement.style.zIndex = '1';
                            newElement.classList.add('list-group-item', 'animation', 'faster', animation);
                            newElement.addEventListener('animationend', () => {
                              lastElement.style.zIndex = '0';
                              newElement.classList.remove('animation', 'faster', animation);
                            });
                            bindRemoveClickEvent(newElement);
                            element.appendChild(newElement);
                            elementNumber += 1;
                          };
                          document.querySelectorAll('#example-list li').forEach((el) => {
                            bindRemoveClickEvent(el);
                          });
                          document.getElementById('add').addEventListener('click', () => {
                            addNewOption();
                          });

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.


                          document.querySelectorAll('button[data-mdb-toggle="collapse"]').forEach((el) => {
                            const animate = new mdb.Animate(el, {
                              animation: 'fade-in-up',
                              delay: '500',
                              duration: '500',
                            });
                            animate.init();
                          });

Animations - API

Usage

Standard animation via CSS class

Standard animation via data attributes

On click animation via data attributes

On click animation via JavaScript


                      const element = document.getElementById('example'); const animate = new
                      mdb.Animate(element, { animation: 'tada', }); animate.init();

On click animation via jQuery


                    $('#example').animation({ animation: 'tada' });

Options

Name	Data attribute	Type	Default	Description
`animation`	`data-mdb-animation`	String	`'fade'`	Changes animation
`animationStart`	`data-mdb-animation-start`	String	`'animationOnClick'`	Set how to run the animation (`onClick`, `onLoad`, `onScroll`, `onHover`, `manually`)
`animationReset`	`data-mdb-animation-reset`	Boolean	`false`	Set to reset the animation after it finishes
`animationShowOnLoad`	`data-mdb-animation-show-on-load`	Bollean	`true`	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
`animationOnScroll`	`data-mdb-animation-on-scroll`	String	`once`	Set `repeat` to start the animation each time the item appears on the screen
`animationOnStart`	-	Function		Callback function fires after start animation
`animationOnEnd`	-	Function		Callback function fires after end animation
`animationOnHide`	-	Function		Callback function fires after show element
`animationOnShow`	-	Function		Callback function fires after hide element
`animationOffset`	`data-mdb-animation-offset`	Number	`0`	Set offset for animate on scroll
`animationDelay`	`data-mdb-animation-delay`	Number	`0`	Set animation delay
`animationDuration`	`data-mdb-animation-duration`	number	`500`	Set animation duration
`animationReverse`	`data-mdb-animation-reverse`	Boolean	`false`	Set true to played animation forwards first, then backwards
`animationInterval`	`data-mdb-animation-interval`	Number	`0`	Set the time interval between animations
`animationRepeat`	`data-mdb-animation-repeat`	Boolean/Number	`false`	Set animation repeat - set `true` to repeat infinity or enter the number of times the animation should repeat

Methods

Name	Description	Example
`dispose`	Destroy animations with this method	`animation.dispose()`
`startAnimation`	Start animating the element	`animation.startAnimation()`
`dispose`	Stop animating the element	`animation.stopAnimation()`
`changeAnimationType`	Change the animation type of an element	`animation.changeAnimationType()`


                      const animateEl = document.getElementById('animate');
                      const animate  = new mdb.Animate(manuallyEl, {
                        animation: 'fade-in',
                        animationStart: 'manually',
                      });
                      animate.startAnimation();

Customize animation via CSS class

Name	Description
`infinite`	Set infinite animation
`delay-1s`	Set animation delay to delay-1s
`delay-2s`	Set animation delay to delay-2s
`delay-3s`	Set animation delay to delay-3s
`delay-4s`	Set animation delay to delay-4s
`delay-5s`	Set animation delay to delay-5s
`fast`	Set animation duration to 800ms
`faster`	Set animation duration to 500ms
`slow`	Set animation duration to 2s
`slower`	Set animation duration to 3s

Callbacks

Name	Description
`onStart`	This callback fires before the animation starts.
`onStop`	This callback starts immediately after the animation has finished.
`onShow`	If you use animate on scroll this callback will start when the element appears on the screen.
`onHide`	If you use animate on scroll this callback will start after the element disappears from the screen.


                      const animateEl = document.getElementById('animate');
                      const animate  = new mdb.Animate(manuallyEl, {
                        animation: 'fade-in',
                        onStart: () => {
                          // do something.
                        }
                      });
                      animate.init();