This React component displays a solid color mask with the silhouette of an image, and when triggered, it performs a fade-in effect to reveal the image. Additionally, the component also plays a Lottie animation.
Alternatively, a component can be passed as a child instead of an image, transition effects and lottie animation will be applied but the silhouette will not be displayed.
The idea behind this package is to add gamification to the applications we write by rewarding the user for achieving different achievements. I welcome any suggestions for including other gamification components in this library, feel free to contribute.
yarn add react-award
npm install react-award --save
Please note that
@lottiefiles/react-lottie-player is a peer dependency and must be installed in order to use this package.
Customize animation size
Customize image size
Image and mask image components default to width 100% and height 100%. You can change the image size
by changing the container size:
You can check the example within the repository to see how the package can be utilized.
|image||string||The ‘source’ property of an image||It can be an imported asset or a URL string|
|animation||string||Lottie animation file||It can be an imported asset or a URL string|
|duration||number||Use this property to define the duration of the transition||It does not affect the duration of the animation|
|play||boolean||Set to ‘true’ to play the animation||This is ignored if ‘playOnHover’ is set to ‘true’|
|playOnHover||boolean||If this is set to ‘true’, the animation will be triggered when the user moves the mouse over the component|
|backgroundColor||boolean||To change the mask color|
|showPlaceholder||boolean||Set this property to ‘true’ to show a placeholder effect when the animation is not ready to be displayed|
|segments||[ number, number ]||Use this property to play only specific segments of the animation|
|onComplete||() => void||Called when the lottie animation has finished|