🤩
Windframe Import Update is finally here.

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.

js
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
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
React Bootstrap 5 animation
js
import React from 'react';
import { CDBAnimation, CDBContainer } from 'cdbreact';
export 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>
);
};

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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBAnimation className="myClass" ... />
tagfunction or StringdivChanges default input tag<CDBAnimation tag="input" ... />
countNumber1The number of iterations the animation should have<CDBAnimation count="{2}" .../>
delayStringSets 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" .../>
durationString or Number1Defines the speed of animation, takes a string consisting of a number and a unit indicator (s/ms)<CDBAnimation duration="3s" .../>
infiniteBooleanfalseMakes an animation go for eternity. Note: it overwrites the count prop<CDBAnimation infinite .../>
onAnimationStartfunctionFires once an animation starts<CDBAnimation onAnimationStart={handleAnimationStart} .../>
onAnimationIterationfunctionFunction 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} .../>
onAnimationEndfunctionFires at the final iteration of an animation<CDBAnimation onAnimationEnd={handleAnimationEnd} .../>
revealBooleanfalseSetting this option makes the component postpone the animation till the viewport reaches it's relative position<CDBAnimation reveal .../>
typeStringThis prop defines the kind of animation desired<CDBAnimation type="tada" .../>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast