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
1
vote
1 answer

React typescript type error with react-spring

I'm getting errors while trying to assign styles to a circle. I'm using react-spring My code Errors >
Samuele1818
  • 336
  • 4
  • 11
1
vote
1 answer

React: Rendered more hooks than during the previous render? React-spring

I've seen similar questions on SO about this error, but I haven't been able to fix my problem below. The situation The code at this link works: https://codesandbox.io/s/frosty-water-118xp?file=/src/App.js However, what I don't like about it is that…
Jason A
  • 81
  • 6
1
vote
0 answers

How to access useSpring value inside React Styled Component?

I am building an animated progress bar component in React, that uses styled-components & react-spring to animate width. I am not sure, if this is a correct approach, but how can I get width property from a spring to pass it as a prop to styled…
Michał Lach
  • 1,291
  • 4
  • 18
  • 37
1
vote
1 answer

Slow performance react-use-gesture and react-spring

Drag examples in the docs such as this one are extremely fast and map very accurately to my finger position. I've tried copying the examples one-to-one but there is a clear lag to catch up with my finger position. Here is a code sandbox example…
david_adler
  • 9,690
  • 6
  • 57
  • 97
1
vote
1 answer

React spring loop won't run with delay

I'm using these styles with react spring, and after it runs one time, it won't run anymore, if I remove the delay it works fine, why is that? const styles = useSpring({ loop: true, to: [ { opacity: 0, color: '#53317e' }, { opacity: 1,…
Alexander
  • 1,288
  • 5
  • 19
  • 38
1
vote
0 answers

How can I auto resize height with react spring

I am trying to create animation for auto height with react spring, I already achieved the animation but if I go to another page and go back to the page that I have auto height animation it's not working until I refresh the page. How can I fix this…
Nhan Nguyen
  • 355
  • 1
  • 6
  • 24
1
vote
1 answer

It is possible to switch between more already loaded images with React Spring?

I want to switch between four images in index page. Now what I have is only change of source of image, that causes switch between images with transition. But problem is that when user loads page for the first time, new switched images needs to be…
Kretiss
  • 657
  • 4
  • 15
1
vote
0 answers

Events callback onRest does not fire up with useSpring of react-spring

I want to use react-flip-toolkit to create an animation like that, but I am already using react-spring to bring some transitions to my page, so I want to switch from animejs to react-spring instead of both. Following another codesandbox I create a…
lezan
  • 759
  • 6
  • 23
1
vote
1 answer

integrate the Material-UI components with the React-Spring animation library

You can find the library here: https://www.react-spring.io/ import React from "react"; import ReactDOM from "react-dom"; import Typography from "@material-ui/core/Typography"; import { useSpring, animated } from "react-spring"; …
Firoj Siddiki
  • 1,649
  • 1
  • 20
  • 22
1
vote
1 answer

I thought react-spring (useSpring) causes the component to re-render a lot, but it may not and how do we make it so?

I thought react-spring useSpring() causes the component to re-render a lot, so if it is a component that already has a lot of CPU intensively work to do, then react-spring is not best suited for the task. I can see that it re-renders a lot, in their…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
1
vote
0 answers

useTransition type error in React(Typescript)

Bug Report const [index, set] = useState(0); const transitions = useTransition(slides[index], (item: Slides) => item.id, { from: { opacity: 0 }, enter: { opacity: 1 }, leave: { opacity: 0 }, config:…
Logan Lee
  • 430
  • 6
  • 18
1
vote
1 answer

React-three-fiber, useSpring - Run 2 different animations one after another on one element

I am pretty green in three fiber and react springs and I have a little problem... I'm trying to animate my cube with onClick to go up and then right like this: brief explanation in image. But I cannot think any way of making animation2 run after the…
Keris
  • 384
  • 2
  • 8
1
vote
1 answer

ReactJS useGesture: typeerror set is not a function

I have been trying to get the example working from the useGesture documentation but I keep getting a typeerror set is not a function error no matter what I try import './App.css'; import React, {useState} from "react" import { useSpring, animated }…
user2771892
  • 15
  • 4
1
vote
0 answers

This expression is not callable. Type 'SpringRef<{ scroll: number; }>' has no call signatures

I'm trying to set the current scroll position using useSpring from react-spring and useCallback from react. But i'm getting this error This expression is not callable. Type 'SpringRef<{ scroll: number; }>' has no call signatures. when I try to…
Shamim Fahad
  • 132
  • 2
  • 12
1
vote
1 answer

How to use the react spring hook with react. Basic code not working

THe animation just doesnt work with this code. What am I doing wrong? import React from 'react' import { useSpring, animated } from 'react-spring' function Comp1() { const props = useSpring({ opacity: 1, from: { opacity: 0 } }) return ( …
Somename
  • 3,376
  • 16
  • 42
  • 84
1 2 3
…
29 30