This component has been built to help you create customizable animated background. You can provide a list of colors, decide how long each color should be visible, set animation timing and its type. Thanks to simple and intuitive API you can create really amazing effects.
npm install --save react-animated-bg
yarn add react-animated-bg
The very basic usage is to just wrap your content in
AnimatedBg. This component requires only one parameter - array of an
colors. Colors can be passed in
rgba or any other system which is accepted by
background CSS property.
import React from "react";import AnimatedBg from "react-animated-bg";// by default delay = 0 and duration = 0.2sconst Wrapper =<AnimatedBg =>My element with animated BG</AnimatedBg>;
Set animation duration time and delay before the next animation starts
You can decide how long the duration of the animation will last. Furthermore, if you want the background to stay for some time before the next transition starts, you can set
delay prop according to your needs.
delay take numeric value representing seconds.
import React from "react";import AnimatedBg from "react-animated-bg";const Wrapper =<AnimatedBg=== //="ease-out"="section-styles"><h2>Duration and Delay</h2><p>Each color will be visible for 4 seconds and will change to another in500ms</p></AnimatedBg>;
How the animation will behave?
Decide how the animation should behave. To make it happen all you have to do is set
timingFunction property. By default, it's
linear. but you can pass here any option from the list below.
import React from "react";import AnimatedBg from "react-animated-bg";const Wrapper =<AnimatedBg==="ease-out"="section-styles"><h2>ClassName and other props</h2></AnimatedBg>;
Hoorah!! You can animate images too!
⚠️ Animating images doesn't work on Firefox since the browser doesn't support the transition for background-image. ⚠️
Because under the hood CSS
background property is updating, the
colors prop array can contain everything which is supported by CSS eg.
url('image.jpg). However eg.
linear-gradient can't be animated this way. The example you can find in the demo
Important: Remember to wrap the images with the url( ) formula.
import React from "react";import AnimatedBg from "react-animated-bg";const Wrapper =const imagesList ='url("")''url("")''url("")''url("")''url("")';return<AnimatedBg===="ease-out"><div ="App"><h1>Animated images</h1><h3>- duration: 2s</h3><h3>- delay: 1s</h3><h3>- transition type: ease-out</h3></div></AnimatedBg>;;
Choose the next background randomly
By default the background is changed according to the order given in the
colors array. If you want you can change it to the random ordering by adding
import React from "react";import AnimatedBg from "react-animated-bg";const Wrapper =<AnimatedBg===="linear"><h2>Random mode</h2><p>Next background will be choosen randomly</p></AnimatedBg>;
This component takes following props
|Prop name||Type||Required||Default value||Description|
|className||string||false||-||The class name provided to the component. It takes CSS modules as well.|
|colors||array of colors/images||true||-||Colors can be passed in a
|delay||number (seconds)||false||0||It tells how long the current background should be displayed before it changes to the next one.|
|duration||number (seconds)||false||0.2||It says how long the animation between one background and the other should last.|
||false||linear||Defines how the transition between one background and another should behave.|
|randomMode||boolean||false||false||If you set it to true next color will be choosen randomly.|
Distributed under the MIT License. See
LICENSE for more information.