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
2 answers

React useState re rendering too many times

I am creating a simple carousel with react and I noticed that my index gets call multiple times and I don't understand why, here is my snippet of code here also here is a full version…
Kevin
  • 339
  • 1
  • 3
  • 14
2
votes
1 answer

React-three-fiber with react-spring animations

sorry if this seems like an obvious answer, but I am trying to create an animation similar to this. I am trying to create one similar with react-three-fiber but I can't use the ones shown in the docs since they manipulate the style transform…
Sophia98
  • 339
  • 5
  • 17
2
votes
3 answers

React Spring delay switching transitions

The title maybe not on spot, but I will try to explain here. I've been using SwitchTransition in in-out mode but since my animation was done using mostly hook useSpring from react-spring package, I would rather move from React Transition Group…
Katherine
  • 576
  • 1
  • 7
  • 19
2
votes
1 answer

React spring transition, achieve a progressive delay in the entry of each element

The first example shown on the react-spring transition page is wrong, the code does not correspond to the animation shown. How could I achieve that same effect?, how can I get a delay between the input of each component and using spring…
Hume
  • 389
  • 5
  • 15
2
votes
3 answers

React-Spring: Invalid Hooks Call

I am trying to learn React-Spring. One of the codes provided in its documentation throws an error when I run it. Any idea what possibly is wrong? How to solve it? The code I'm trying to run is- const TextContent = (props) => { const [items] =…
Pratyush
  • 163
  • 1
  • 7
  • 15
2
votes
1 answer

React - Carousel with transitions between slides, react-spring

I've currently made a carousel component, I'm passing my data to it but I would like to add a transition between switching the data. I've heard a lot of people recommending react-spring so I thought I'd give it a try. I'm currently trying to…
Jordan
  • 1,101
  • 1
  • 12
  • 26
2
votes
1 answer

React Spring - Animate element between renders

I'm trying to get my head over React Spring. So I have some boxes, which I need to filter by an active index, and the idea is to animate the boxes rendering, but I'm only having an animation when the component renders the first time. This is what I…
darksoulsong
  • 13,988
  • 14
  • 47
  • 90
2
votes
1 answer

A warning is thrown because of an update to ForwardRef when testing a component animated with react-spring with @testing-library/react

I have a component animated with react-spring using the useSpring hook. Something like: function Toggle({ handleToggle, toggled }) { const x = useSpring({ x: toggled ? 1 : 0 }); return (
Tiago Alves
  • 2,290
  • 13
  • 32
2
votes
1 answer

Convert React-Spring Example to Styled-Components

Tried copying this example, but I'm using gatsby & styled components; So I'm trying to convert the plain css file to styled-components. However, the cards aren't moving or reacting at all when I click or drag, did I do something horribly wrong? This…
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
2
votes
0 answers

React spring animating drop-down list whose content comes from state but doesn't stay on state when collapsed

I have a list of items that can be clicked to show the contents. I need to animate the expanding and collapsing of the contents and I'm currently exploring the Transition component of React Spring. When an item on the list is clicked, the content…
jelacs
  • 21
  • 2
2
votes
1 answer

Stop React spring animation if user scrolls while animating

I am using react spring to animate the window scroll 500 ms after the component is mounted. The problem happens if the scroll animation and the user's scroll happen at the same time. I made it check if the page scroll is 0 before it starts animating…
Mohamed Seif Khalid
  • 555
  • 1
  • 4
  • 14
2
votes
1 answer

How does wait for completion two parallels animation in react-spring?

I have 3 components. 2 of them run animations in parallel. Third must run animation consistently only after two components has complete their animation. How does to reach this with react-spring?
Владислав Арсеньев
  • 31
  • 1
  • 3
2
votes
1 answer

how to make animation for div in react using react-spring when hiding?

as for react with react-spring hiding to make an animation for a div when click on button {aa}? https://codesandbox.io/s/silly-feistel-j1snp const props = useSpring({config: { duration: 1250 },opacity: 1, from: {opacity: 0}}); const foo =() =>{ …
recile
  • 381
  • 2
  • 4
  • 15
2
votes
0 answers

react-spring svg dashoffset doesn't animate in safari

My react-spring svg animation doesn't work in Safari I'm using react hooks and the react-spring animation library and my code works in Chrome and Firefox but not in Safari. const [timerCircumference, setTimerCircumference] = useState(0); //…
Mayowa Daniel
  • 397
  • 5
  • 14
2
votes
1 answer

useSpring() doesn't work when animating transform with initial state equal to "translate3d(0,0,0)"

How to use the useSpring() hook? I'm trying to use the useSpring() hook to animate the transform property: It simply doesn't work if the initial state is "translate3d(0,0,0)", for instance, if I initialise it like that with toggle being false: const…
zok
  • 6,065
  • 10
  • 43
  • 65
1 2 3
…
29 30