🚀 Smooth Liquid Swipe Animation to transition between different components.
MIT License
⭐ 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
.
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.
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.
If you think you can solve any of the above problems then we will highly appreciate you to raise the pull request.
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.
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.
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 :-
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!