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 animate the filtering of a list using useTransition in react-spring

I am trying to animate the transition of a list when filtered using the new useTransition hook changes in react-spring v9.x so that as list items are filtered the remaining items move to their new positions. So far I have managed to get components…
Danoram
  • 8,132
  • 12
  • 51
  • 71
2
votes
1 answer

Using react-spring, AnimatedFoo = animated(Foo) doesn't work -- or how to animate a Component?

In react-spring Basics page: const AnimatedDonut = animated(Donut) because I think can work, but doesn't work. So I tried: https://codesandbox.io/s/weathered-breeze-ghdse const AnimatedFoo = animated(Foo); //…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
2
votes
0 answers

React/React-spring: how to get an element/component out of the html flow?

I'm new to web dev (and very new to React) and I was wondering how you could get an element or component out of flow using react-spring. Example code: import React from "react"; import Hello from "./Hello" import World from "./World" function App()…
Rafi
  • 21
  • 2
2
votes
0 answers

Animate toggle of div with React Spring

I have a child component that I'm trying to get to slide into view using react-spring. However, I'm unsure how to trigger that animation with react-spring. I believe I should be able to use react-spring to adjust the position of the…
Matt
  • 1,561
  • 5
  • 26
  • 61
2
votes
0 answers

Can't scroll on touch devices when having scrollable content (react-use-gesture)

I am using useDrag hook of react-use-gesture to achieve the following animation (switching between chapters) but it does not work on touch devices without touch-action: none;. I have scrollable content, if I set touch-action:none the scroll doesn't…
Ritesh Sahu
  • 21
  • 2
2
votes
0 answers

Browser animation glitch react-spring

I am building an animated grid with react-spring. Elements are animated from previous to next position. Positions are calculated to fit elements depending on width and their margins. The problem There is a glitch when the animation enters that halts…
MikeMajara
  • 922
  • 9
  • 23
2
votes
0 answers

react-spring animation, Getting a unwanted line drawn when element moves

You will get what i mean once you visit my project here https://resume2020master.gtsb.io/ when the earth moves.. it creats "////" looking line while it moves. Is the issue related to performance? Following is the code of the element, I have used…
Shubhro Banerjee
  • 21
  • 2
2
votes
2 answers

React-spring - Animated div removes onclick function

I'm facing problem with my onClick function which is on a element. Without React-spring animations it works perfectly. But since I've added animations to it, function is not working. No errors in console, and I really can't find any problems like…
Pinncik
  • 321
  • 3
  • 14
2
votes
1 answer

How to stop React-spring from running an animation on re-render

I am using react-spring to animate my components. But I want to only run the animation when mounting then the leaving animation when unmounting. But my animation runs everytime a component re-renders. every prop change causes the animation to run…
DANIEL SSEJJEMBA
  • 342
  • 5
  • 15
2
votes
1 answer

useSpring won't animate on prop change

As opposed to what is mentioned in Spring's documentation, useSpring does not animate my counter component on prop change: If you re-render the component with changed props, the animation will update. I've tried passing the props as children, to…
msalla
  • 717
  • 6
  • 23
2
votes
1 answer

How to attach multiple react-spring springs on a single component?

I'm trying to learn how to use react-spring. Let's say that I have three divs to animate. and trans1 has the following configuration… const [clicked, toggle] = useState(null) …
Selino
  • 111
  • 3
  • 12
2
votes
1 answer

Unable to animate THREE.js property using React Spring

I would like to have React Spring animate a property of a material in Three.js. However, I'm getting an error when I try to do so: THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN…
charlieyin
  • 371
  • 6
  • 16
2
votes
1 answer

How to properly move a React component from left to right using react-spring on scroll?

I have a div which contains an image and some text on it aligned to center I need to make a transition with react-spring that when I scroll it should look like the text is coming from -x value to 0 and it has to be very smooth and real looking. So I…
Jananath Banuka
  • 493
  • 3
  • 11
  • 22
2
votes
1 answer

Animation using react-spring interpolate function not working

I am trying to understand how the react-spring interpolation works. Here is my spring: const { x } = useSpring({ from: { x: 0 }, x: 100, config: { duration: 1000 } }) Here is how I am using it: ... return (
Akshay Kumar
  • 875
  • 13
  • 29
2
votes
1 answer

React Spring "Can't perform a React state update on an unmounted component"

I have been running into using react spring when clicking quickly: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and…
Stephen Phillips
  • 641
  • 10
  • 26
1 2 3
…
29 30