The @react-spring/web package is a spring-physics based animation library tailored for React applications. It allows developers to create smooth and natural animations using spring dynamics. It is part of the react-spring family of packages and is specifically designed for web-based projects.

What are @react-spring/web's main functionalities?

Animating styles

Animate the opacity of an element from 0 to 1.

{"from": {"opacity": 0}, "to": {"opacity": 1}}

Animating properties

Animate the scroll position of an element from 0 to 100.

{"from": {"scroll": 0}, "to": {"scroll": 100}}

Mount and unmount transitions

Handle mount and unmount transitions with opacity and height animations.

{"from": {"opacity": 0, "height": 0}, "enter": {"opacity": 1, "height": 100}, "leave": {"opacity": 0, "height": 0}}

Chain and delay animations

Chain multiple animations together with a delay.

{"to": [{"opacity": 1, "color": "#ffaaee"}, {"height": "100%"}], "delay": 200}

Spring configuration

Customize the spring physics for the animation.

{"to": {"transform": "translate3d(0,100px,0)"}, "config": {"tension": 170, "friction": 26}}

Other packages similar to @react-spring/web

Readme

Source

@react-spring/web

react-dom support

Keywords

FAQs

What is @react-spring/web?

Is @react-spring/web popular?

Is @react-spring/web well maintained?

Last updated on 26 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install