Animation

React Bootstrap 5 Animation

Animations are illusions of motions for web elements. +70 animations generated by CSS only and works properly on every browser. They bring your website to life and help to draw and capture a user's attention.

With animations we can watch an element gradually and aesthetically change from one state or CSS style to another, making these elements appear to move.

Web animations definitely has it's pros, but can however, prove itself sometimes diffcult to implement, thankfully the Contrast React Bootstrap 5 library is here to lend a hand.

Importing the React Bootstrap 5 Animation Component.

You have to import 'CDBAnimation' into your component in order to use the Contrast React Bootstrap 5 Animation component.

import { CDBAnimation } from 'cdbreact';

Animating an element with CDBAnimation

To animate an element, you wrap the element with the CDBAnimation component and specify the kind of animation you want in the type prop.

With Contrast we get access to different types of animations, some of which are:

bounce : This type of animation translates your element up and down, giving your element the illusion of bounce.
flash : This hides your element and displays your element, allowing your element to disappear and reappear, causing the element to 'flash'.
pulse : This animation property scales the element and returns the element to it's original size.
rubberBand: This property stretches the element's length and returns it to it's oriinal length, giving the element a stretchy feel.
shake: This animation property moves the element side to side.
headShake: This animation property has a similar effect to the the shake property, the difference is that the distance which the element moves is alot shorter.
swing: This animation property gives the element an effect similar to swinging a hanging picture.
tada: This animation property scales up the element, shakes the element a little andthen returns the element to its original size.
wobble: This animation property moves the element side to side but this property however translates the element a lot farther than the shake property would have it.
jello : This stretches the element at its borders.
heartBeat : This type of animation scales the element, returns the element to its original size. This animation occurs twice giving the element the motion that can be likened to a heartbeat

import React from 'react';
import { CDBAnimation, CDBContainer } from 'cdbreact';

 const Animation = () => {
  return (
    <CDBContainer>
      <CDBAnimation type="bounce" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="flash" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="pulse" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="rubberBand" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="shake" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="headShake" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="swing" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="tada" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="wobble" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="jello" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
      <CDBAnimation type="heartBeat" infinite>
        <img alt="React Bootstrap 5 animation" src="img/ball.png" width="50" height="50" />
      </CDBAnimation>
    </CDBContainer>
  );
};

export default Animation

API

Advanced information about the Animation component can be found in this section. You'll learn which modules are required, what configuration options are available, and what events and methods you can use to interact with the component.

API Reference: Contrast Animation Properties

The table below shows the configuration options of the CDBAnimation component.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBAnimation className="myClass" ... />
tag	function or String	div	Changes default input tag	<CDBAnimation tag="input" ... />
count	Number	1	The number of iterations the animation should have	<CDBAnimation count="{2}" .../>
delay	String		Sets the amount of time that should pass before the initial iteration of animation, takes a string consisting of a number and a unit indicator (`s`/`ms`)	<CDBAnimation delay="3s" .../>
duration	String or Number	1	Defines the speed of animation, takes a string consisting of a number and a unit indicator (`s`/`ms`)	<CDBAnimation duration="3s" .../>
infinite	Boolean	false	Makes an animation go for eternity. Note: it overwrites the `count` prop	<CDBAnimation infinite .../>
onAnimationStart	function		Fires once an animation starts	<CDBAnimation onAnimationStart={handleAnimationStart} .../>
onAnimationIteration	function		Function gets executed every time an animation happens. To have things happening only on particular iterations (say, every time for the first five times and then every fifth one), it is enough to create a variable being incremented within a function and to define a simple `if` statement to see, whether the ongoing iteration number fulfills the requirement (example `if (count < 6 && count > 5){yourFunction}`)	<CDBAnimation onAnimationIteration={yourFunction} .../>
onAnimationEnd	function		Fires at the final iteration of an animation	<CDBAnimation onAnimationEnd={handleAnimationEnd} .../>
reveal	Boolean	false	Setting this option makes the component postpone the animation till the viewport reaches it's relative position	<CDBAnimation reveal .../>
type	String		This prop defines the kind of animation desired	<CDBAnimation type="tada" .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Badges

Autocomplete