Stack Overflow
Stack Overflow

Questions tagged [react-spring]

react-spring is a set of simple building blocks that should cover most of UI related animation needs in a react application.

React-spring is a library which supports different types of animation. It is used to create different types of 2d, 3d shapes and has lot of animation effects which would otherwise take a lot of css styles to implement.

For more info check the below link:

React Spring Github

437 questions
2
votes
1 answer

How to scroll to the particular div on button click in a single page application using react-router?

Iam having two buttons(Home, Contact Us) in my header and iam having the content for "Home and Contact Us" in a div on the same page, while im clicking the home or contact button it should scroll to that particular div using React-Router Since iam…
SJ Purusothaman
  • 33
  • 1
  • 1
  • 8
2
votes
1 answer

React-Spring useTransition shuffles my list items around

I have a list of labels that I render with a React-Spring Transition. The idea is that you can add items and if you have more than 5, a "Show more" button will appear. Pressing this button toggles wether you're showing all of the labels or just the…
jabsatz
  • 341
  • 3
  • 10
2
votes
1 answer

change state on completion of react spring animation,

Currently I have a use case, where the animation is triggered on a state change which gets initiated by a click action. Things work fine when I do a click for the first time, if I continuously click on the same link, the animation doesn't trigger,…
MeanMan
  • 1,040
  • 10
  • 25
2
votes
2 answers

React-Spring transition 'leave' animation not working

When spring items leave the DOM nothing (no leave animation) happens. Full CodeSandbox: https://codesandbox.io/s/jzz6xv1y4w const Todo = ({ todo, onDeleteClick }) => { const transition = useTransition(todo, null, { from: { opacity: 0,…
LewisLA
  • 33
  • 1
  • 4
2
votes
1 answer

Typescript with react-spring. Property 'interpolate' does not exists on type 'number'

I use react-spring with Typescript. When I use the native rendering with react-spring I get an error message to the interpolate function. "Property 'interpolate' does not exist on type 'number'" I tried to introduce an interface to the Spring…
Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36
2
votes
2 answers

Animated button with React Spring

I am coming from a React-pose background and like to try React-spring. I have a really simple case which I'd like to transfer to be used with React-spring. I have the case written in a Codesanbox using React-pose,…
Martin Nordström
  • 5,779
  • 11
  • 30
  • 64
2
votes
0 answers

Height animation in React Spring not working

I've been animating scale with React Spring. The following works fine:
    {items.map((item, index) => { if (index === items.length - 1) { return (
    Evanss
    • 23,390
    • 94
    • 282
    • 505
2
votes
1 answer

Snapshot testing with react-spring/react-motion

I am trying to snapshot test my React components with Jest and Enzyme. Some components have the animation component (imported from react-spring/react-motion) in them, which renders a function as its child. This makes testing incredibly hard. I did…
Brian Le
  • 2,646
  • 18
  • 28
2
votes
3 answers

Is it possible to animate to 100% in react-spring?

I am using react-spring to try and animate in AJAX content as it is loaded. I have a container component that I sometimes want to animate to 'auto' from 0 and sometimes I want to animate to 100% depending on a prop that is passed in. I have a const…
Antfish
  • 1,313
  • 2
  • 22
  • 41
2
votes
1 answer

React-spring animation only works at first render

I try to animate new entries in an array as they appear with react-spring It works quite fine at the first render but then doesn't animate when updated Here's a code sandbox where I reproduced the issue with an interval :…
3Dos
  • 3,210
  • 3
  • 24
  • 37
1
vote
1 answer

webpack can't resolve react-spring_core.legacy-esm.js in module of react-spring/web

My webpack.config.js const path = require("path"); const webpack = require("webpack"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const googleConfig = require("./google.config.json"); module.exports = (env, args) => { const…
Khải Nguyễn
  • 15
  • 5
1
vote
1 answer

how can i set height from 0 to 'auto' within @react-spring useTransition?

I used useTransition hook to add animation to a list element, and its child element's height is not a fixed number. if I set {from:{height:0},enter:{height:'auto'}, the element lose animation. I want the children in transition animation div have a…
alex
  • 11
  • 3
1
vote
0 answers

How to combine scrollbars?

I'm currently trying to learn some react-spring. For that I'v created a development server with npx create-react-app name If I just use the App.js and to not add anything new to the index.html, I don't have any problems. But if I want to use both I…
XidirDerKameramann
  • 11
  • 1
1
vote
0 answers

fixed bottom position broke after animation - react-spring

I have a component that appears whe user scrolls, and this component is meant to stick on the bottom right of the screen. It worked fine until I added an animation on all my pages. Now it stays on bottom of the app, not of the screen. I have to…
Johan
  • 2,088
  • 2
  • 9
  • 37
1
vote
0 answers

Possible to trigger animation every time user scrolls down and not trigger when scrolls up back?

React Spring useInView has "once" property that can be used to trigger animation again whenever it is out of the viewport. const [a, springs] = useInView( () => ({ from: { opacity: 0, x: 100, }, to: { opacity: 1, x: 0, }, }), { once: true,…
Zaw Htet Aung
  • 11
  • 1
1 2 3
…
29 30