react-liquidswipe

🚀 React LiquidSwipe

Very smooth component transition animation with liquid swipe effect.

Loved the project? Please consider donating to help it improve!

If you want to discuss about something, then you can ask on my Discord Server.

:star: Star us on GitHub — it helps!
To view a live example, click here

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.

Technologies Used 🛠️

• GatsbyJS
• React Spring
• React UseGesture
• Styled Components
• Prettier
• Theme UI
• React Icons

3D Clay Device Illustrations 🍥

• Shapefest

Important Links 📑

• Github Repository - It contains the ReactJs implementation of LiquidSwipe
• YouTube Video - How it is built and how you can use it in your website
• Behance Design
• Dribbble Shot

Caution ☠️

This project is still under development and has many issues with it. We have only achieved animation. We need to handle the side effects which it has generated. So, I would humbly suggest you not to use this animation in below cases.

• The animation uses dynamic rendering. So, globally rendered background colors by any theming library (styled-components, emotion, theme-ui) will not work. You can use theming libraries for all purposes other than changing colors.
• Currently it is not working in mobile and tablet screens since click is not available and tap animation code has to be added.

If you think you can solve any of the above problems then we will highly appreciate you to raise the pull request.

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details. You can use this project for personal as well as commercial purposes. But if you think you have modified the project and built something really good, we will humbly request you to raise the pull request and share with the opensource community.

Contributing 💡

If you can help us with these. Please don’t hesitate to open an pull request or issue. If you want to know about how to create pull request, then please refer to this blog.

I have mentioned issues with the current implementation in the Caution section. We are highly appreciating you to raise the pull request to resolve some/all the issues.

Donate 💉

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this project for personal and commercial purpose for free.

However, if you are using this project and happy with it or just want to encourage me to continue creating stuff, there are few ways you can do it :-

• Giving proper credit when you use this on your project, linking back to it :D
• Starring and sharing the project 🚀
• You can make one-time donations by clicking the buttons below. I’ll probably buy an amazing workstation which will help me build more aggressively.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ashutosh Hathidara 💻 📖 🎨 🤔 🚧

Andre Rodrigues Lima 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

References 👏🏻

• Cuberto Design Agency has created an original design concept
• React Native implementation by William Candillon
• A codepen by Yugam