npm install react-spring-pop1. Introduction
2. Motivation
3. Installation
4. Basic usage
6. Demo
5. Others
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.
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.
``cmd`
yarn add react-spring-pop react react-spring
`cmd`
npm i -s react-spring-pop react react-spring
This 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.
`jsx
import { PopIn } from "react-spring-pop";
function App() {
return (
{/ Whatever your want to pop-in here! /}
)
}
`
You can check a demo featuring all of the animations on the always marvelous CodeSandbox.io
React Spring POP! comes out-of-the-box with a few components to deal with pop in animations. Those components are the following.
* PopIn
*
*
*
*
This components will accept the following props to configure a little its behaviour:
`js
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.
React Spring POP! comes out-of-the-box with a few components to deal with fade in animations. Those components are the following.
* FadeIn
*
*
*
*
This components will accept the following prop to configure a little its behaviour:
`js
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.
React Spring POP! comes out-of-the-box with a few components to deal with bounce in animations. Those components are the following.
* BounceInLeft
*
*
*
This components will accept the following props to configure a little its behaviour:
`js
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.
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!