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

Reverting useSpring() with delays: How to make a spring act in reverse when receding?

Consider the following example code with two independently animated dimensions with different delays (Sandbox here): import React, { useState } from 'react' import { useSpring, animated } from '@react-spring/web' const from = { width: 100, height:…
Michal Kurz
  • 1,592
  • 13
  • 41
1
vote
1 answer

React Spring Change Animation Direction based on next component index

I'm working from this example, which is from the React Spring docs: https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/simple-transition?file=/src/App.tsx My use-case is different because I need be able to go back and…
Willow
  • 1,132
  • 5
  • 20
1
vote
1 answer

Add timer so that image changes automatically in 3 seconds

Hey guys I wanted to add timer along with these gestures to the following react-spring example. I've been struck with this since a long time. It'll be of great assistance. Also I'm working with makestyles from material ui. It would be an additional…
Salman Abbas
  • 41
  • 6
1
vote
0 answers

react-spring Wrapped Component Not Working

I'm trying to create a custom wrapped component with react-spring, based on this example. When hitting the button, the component should animate val from 0-100, but nothing happens. Typescript is giving me error: Type '{ interpolate:…
ANimator120
  • 2,556
  • 1
  • 20
  • 52
1
vote
1 answer

How to make a looping animation with react-spring useChain

I wanted to crate a looping animation for loading using react-spring , but when I use loop it get the timing wrong and I do not know how to make useChain animation loop. const animation = { from: { scale: 0, opacity: 0, background: 'red' }, to:…
menaka
  • 1,045
  • 1
  • 12
  • 30
1
vote
1 answer

Use React Spring With Orbit Controls in React Three Fiber

I'm trying to use Orbitcontrols in combination with react spring to animate my camera in React Three Fiber. This is my approach so far: function Controls({ cameraData, duration }) { const [orbit, setOrbit] = useState(true); const [target,…
tinytree
  • 1,009
  • 2
  • 12
  • 28
1
vote
1 answer

How to change colors using React-Spring. I would like to include delay and duration

I am using react-spring. I am changing the background color which is working however I am hoping to do the following. Wait for 10 seconds then after those 10 seconds loop through the colors without the delay. I would also like to have a 1 second…
Jerry seigle
  • 231
  • 2
  • 11
1
vote
2 answers

How to stop at the nearest row using react-spring + decay?

I implement calendar which can be veristically dragged by a mouse. I would like to have some inertia on mouse release. I was able to achieve this functionality by using use-gesture + react-spring libs. This is how it looks The problem I would like…
Roman Mahotskyi
  • 4,576
  • 5
  • 35
  • 68
1
vote
0 answers

How can I prevent my spring (react-spring) from resetting initial values in a loop?

I have been trying to use react-spring to animated a little planetarium in react. To do so i'm using react-spring to animated an Orbit component in which i have my spring hook than controls the rotation and orbit dimensions. Problem is when i try to…
Nezzar KEFIF
  • 11
  • 1
  • 1
1
vote
1 answer

Animate conditional rendering based on props with react-spring

I want to animate multiple steps within a form with react-spring. This is what I have so far. import React, { useState} from 'react'; import { animated, useSpring } from 'react-spring'; const AnimatedContainer = animated.div function…
Gabriel
  • 23
  • 4
1
vote
1 answer

Error in react-spring with typescript for react

I'm trying to make an animation using react-spring, but when I go to call the useTransition function passing the properties of some kind of errors I'm not understanding import React from 'react'; import { useTransition } from 'react-spring'; import…
Colgate
  • 15
  • 5
1
vote
1 answer

TypeError: transitions.map is not a function with React-Spring

I'm trying to make a responsive Navbar with react and I keep getting the error "TypeError: transitions.map is not a function" I'm following a tutorial and have used the same code so I'm not sure why I'm being thrown this error. It's my understanding…
wayoh22
  • 176
  • 9
1
vote
1 answer

How to prevent react-spring animation when updating state?

I have a problem with react-spring useTransition animation when I update a property of my animated element. The list of objects that I pass to my useTransition is: const habits = [ { id: "V3WV", name: "Go to gym", completions: [] }, { id:…
MonaLisaLover
  • 39
  • 5
1
vote
1 answer

How to combine React-Spring useTrail and useTransition on same elements?

I have an array of items that animate to the screen with react-spring useTrail hook when the page loads. I would like to animate the removing of these items with useTransition hook but I have hard time figuring out how to implement both of them. I'm…
MonaLisaLover
  • 39
  • 5
1
vote
1 answer

React Spring useTransition not working as expected

So i tried to make a transition where the logo and the name of the companies go on in a loop. But as you can see in the gif the animation is not smooth as expected PS- Im using Next.js const clients = [ { image: "/clients-logo/ABC.png", …
robo
  • 89
  • 1
  • 9
1 2 3
…
29 30