React Spring POP!
Contents
Introduction
React Spring POP! is a physics based animation library for your React application. It uses React Spring to generate performant off-thread calculations for the physics based animations and the Intersection Observer API with the @alexvcasillas/use-observer library which both of them are pretty cool and my defaults to go.
Motivation
I started working on animating some components when they appeared at the viewport to make cool landing pages animations and other cool applications' stuff. Then I realized that this could potentially be useful for many other developers out there in the wild, so I decided to create this library just for you to have this things out-of-the-box and not having to deal with configs and bla bla bla.
Installation
yarn add react-spring-pop react react-springnpm i -s react-spring-pop react react-springThis project has two peer dependecies which are: React and React Spring. You will need both of the installed in your project in order for React Spring POP! to work properly.
Basic usage
import { PopIn } from "react-spring-pop";
function App() {
return (
<PopIn>
{/* Whatever your want to pop-in here! */}
</PopIn>
)
}Demo
You can check a demo featuring all of the animations on the always marvelous CodeSandbox.io
Pop Animations
React Spring POP! comes out-of-the-box with a few components to deal with pop in animations. Those components are the following.
PopInPopInLeftPopInRightPopInTopPopInBottom
This components will accept the following props to configure a little its behaviour:
prop: element;
type: string;
default: 'div';
prop: once;
type: boolean;
default: false;
prop: threshold;
type: number;
default: 0;
min: 0;
max: 1;
prop: tension;
type: number;
default: 180;
min: 1;
max: 500;
prop: friccion;
type: number;
default: 12;
min: 1;
max: 500;
prop: mass;
type: number;
default: 1;
min: 1;
max: 500;The element property indicates which kind of HTML element would you like to generate for this animated component.
The once property indicates if the animation should be only triggered once and no more, so it will only get triggered the first time the element is on the viewport with the given threshold.
The threshold property indicates how much of the component needs to be displayed within the viewport to trigger the animation. It will take a number from 0 to 1 to indicate the percentage of the component that's on the viewport, meaning that 0.5 will be equals to the 50% of the component.
The tension property indicates the spring energetic load.
The friccion property indicates the spring resistance.
The mass property indicates the spring mass.
Fade Animations
React Spring POP! comes out-of-the-box with a few components to deal with fade in animations. Those components are the following.
FadeInFadeInLeftFadeInRightFadeInTopFadeInBottom
This components will accept the following prop to configure a little its behaviour:
prop: element;
type: string;
default: 'div';
prop: once;
type: boolean;
default: false;
prop: threshold;
type: number;
default: 0;
min: 0;
max: 1;The element property indicates which kind of HTML element would you like to generate for this animated component.
The once property indicates if the animation should be only triggered once and no more, so it will only get triggered the first time the element is on the viewport with the given threshold.
The threshold property indicates how much of the component needs to be displayed within the viewport to trigger the animation. It will take a number from 0 to 1 to indicate the percentage of the component that's on the viewport, meaning that 0.5 will be equals to the 50% of the component.
Bounce Animations
React Spring POP! comes out-of-the-box with a few components to deal with bounce in animations. Those components are the following.
BounceInLeftBounceInRightBounceInTopBounceInBottom
This components will accept the following props to configure a little its behaviour:
prop: element;
type: string;
default: 'div';
prop: once;
type: boolean;
default: false;
prop: threshold;
type: number;
default: 0;
min: 0;
max: 1;
prop: tension;
type: number;
default: 180;
min: 1;
max: 500;
prop: friccion;
type: number;
default: 12;
min: 1;
max: 500;
prop: mass;
type: number;
default: 1;
min: 1;
max: 500;The element property indicates which kind of HTML element would you like to generate for this animated component.
The once property indicates if the animation should be only triggered once and no more, so it will only get triggered the first time the element is on the viewport with the given threshold.
The threshold property indicates how much of the component needs to be displayed within the viewport to trigger the animation. It will take a number from 0 to 1 to indicate the percentage of the component that's on the viewport, meaning that 0.5 will be equals to the 50% of the component.
The tension property indicates the spring energetic load.
The friccion property indicates the spring resistance.
The mass property indicates the spring mass.
Others
If you want a more CSS-in-JS approach I've also developed Animated Styled Components which makes use of styled-components and pure CSS animation keyframes and it comes with a lot of ready to drop in animations!