React LiquidSwipe

Smooth Liquid Swipe Animation to transition between different components.

React-LiquidSwipe

View Demo View Github

React LiquidSwipe is created using physics based animation libraries react-spring and react-use-gesture.

Use in your website ✏️

Liquid swipe effect is created considering reusability in mind. As of now, there is no npm or yarn package that you can install because there are several major issues with this package and they are mentioned in the later section of this file. Once, those errors are addressed, we can wrap the component as npm or yarn package.

If you want to use this animation in your website, you can clone the repository and you can copy the file src/components/liquidswipe.js in your project.

To use the component, your code should look like below.

import { LiquidSwipe } from '<relative-path-of-liquidswipe.js>';
...
export const YourComponent = () => {
    var componentsToRender = [] // Add components you want to render.
    var backgroundColors = [] // Add background colors for each component.
    ...
    return (
        ...
        <LiquidSwipe
            components={componentsToRender}
            colors={backgroundColors}
        />
        ...
    );
}

As of now, the mass and tension of the animation drag is constant and is defined in liquidswipe.js file but it may be a changeable parameter in the future version.

If you think that this documentation is not enough for you to understand, I have given other resources links in the Important Links section.

GitHub