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
0
votes
1 answer

How to stop the slider from resetting to the left side on mouse release (react-spring react-use-gesture)

Code sandbox: https://codesandbox.io/s/draggable-image-gallery-3-59crp Im using react-use-gesture to create a horizontally draggable image slider. So far the logic I have for dragging is set({ x: down ? mx : 0 }); where if the user presses down on…
user11834465
0
votes
2 answers

react-use-gesture useScroll not detecting scroll event

I am trying to use the react-use-gesture library, but can't even seem to get some simple hooks working. I'm trying to use the useScroll hook (eventually to get an animation running with react-spring), but when I bind it to my component, nothing…
RogyBear
  • 83
  • 1
  • 10
0
votes
1 answer

react-spring: fade in top-left to bottom-right

I am currently moving our animations over to react-spring but am having difficulty implementing animations such as fade-in top left to bottom right. Something simple along these lines fades in a div but I need to control the direction of the fade…
AlexanderKaran
  • 515
  • 6
  • 18
0
votes
1 answer

Is there a way to delay a spring until the image has loaded?

I'm using react-spring with the render-props API to set a background-size CSS property. The change is triggered whenever the background image changes. The thing is: the background image does not always load fast enough for the background size to…
Piorrro33
  • 19
  • 8
0
votes
1 answer

react-spring equivalent of react-pose PoseGroup

React Pose PoseGroup simply animates elements of a list when the list change with the flipMove option https://codesandbox.io/s/inspiring-herschel-37bvs How to do it with react-spring? {items.map(item => ( ))} I'd like to…
sebap
  • 1,601
  • 5
  • 24
  • 41
0
votes
2 answers

Make text become white upon changing value in react? React-spring?

I have a div, with player score, deaths and assists:
{data.kill_count}/{data.death_count}/{data.assists_count}
Every time the kill or death count changes, I'd like the text to turn a bold…
Noob
  • 754
  • 3
  • 10
  • 27
0
votes
1 answer

Creating a slider that slides items in an arc / upper cricle

I'm attempting to create a carousel that rotates items in a upper circle / arc fashion. This is how it's supposed to roll: https://thumbs.gfycat.com/HastyTemptingBarnswallow-mobile.mp4 My initial thought is to have 1 element in the middle then one…
jones
  • 585
  • 3
  • 10
  • 30
0
votes
2 answers

React-Spring Error: 'animated' library from react-spring returns ERROR element type is invalid

I am trying to make a simple animation where my image will fade in. Code below I am importing {useSpring, animated} from 'react-spring'. I create simple useSpring function logoLoadingScreen. Then I add the function inside the styling for IMAGE;…
Daniel Kang
  • 525
  • 4
  • 13
0
votes
1 answer

Triggering specific function on state change

I'm trying to trigger a button to bounce when button is clicked and I'm trying to overcome a few things mentioned below: How do I stop useSpring to only execute when click = true (also on load)? A follow up question for this is. true is temporary…
Freddy.
  • 1,593
  • 2
  • 20
  • 32
0
votes
1 answer

react-spring : Transition component issue

I am using react-spring, Transition render prop component. I am facing an edge case where even after the items are updated via setState() the items used in component shows the old values and appends new values to it. I was expecting a behaviour…
Satej Rajam
  • 9
  • 3
0
votes
1 answer

Ignore initial Transition for first mount React-Spring

I have a react component which needs a transition for for in and out. But on the first mount it should not use an entry animation. I use a simple fade in fade out. the initial keyword should deactivate the initial transition for the first mount. But…
Solesins
  • 11
  • 2
  • 7
0
votes
2 answers

Animate conditionally React component with react-spring

I have a react component and I want to animate it when the state of the component change. I am using useReducer const [state, dispatch] = useReducer(reducer, initialState); Then on click I update the state.isOpen from false to true or vice versa. In…
Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31
0
votes
1 answer

How To Transition React Elements That Already Have An Animation

I need some help merging an animation and a transition that occur at different times using react-spring. When the component is mounted using useSpring I make the component appear, but I would like it so that when the button child is removed the…
Arjun Gupta
  • 23
  • 3
0
votes
1 answer

React-Spring Parallax Can't Declare Offset With State Mapping Function

im trying to create a react page with react-spring's parallax.Im using web api for data so when i use parallax tags im trying to set offset and scrollTo function's value.As you can see below; class HomeComponent extends Component…
Kadir Akın
  • 43
  • 1
  • 7
0
votes
1 answer

Prevent Scrollbar Appearing on transform: translate with React-Spring

Whenever I add a translate() CSS function to a react-spring useTransition hook from or leave property where the element will go out of the viewport, I am getting a vertical/horizontal scrollbar. const transitions = useTransition(show, null, { …
mcclosa
  • 943
  • 7
  • 29
  • 59
1 2 3
…
29 30