Smooth Liquid Swipe Animation In React

Description:

A React animation component that helps create smooth component transition animations with a liquid swipe effect.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-liquidswipe

# NPM
$ npm i react-liquidswipe

2. Improt the LiquidSwipe component.

import { LiquidSwipe } from ‘liquidswipe.js’;

3. Apply the animation to components.

export const YourComponent = () => {
    var componentsToRender = [
          // components to render
        ] 
    var backgroundColors = [
          // array of bg colors for each component
        ] 
    return (
        <LiquidSwipe
            components={componentsToRender}
            colors={backgroundColors}
        />
    );
}

Preview: