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

Animating scrollTop using react-spring

this should be simple but i think i'm missing something crucial on how Spring works, the documentation is not much of help. I have a dynamic list, the user can add elements, when that happens i want to use React Spring to animate the scroll to the…
Bolza
  • 1,904
  • 2
  • 17
  • 42
0
votes
1 answer

Passing Functional Components to React Spring's useTransition

I'm trying to write a React component which contains a panel of buttons, and each of the buttons needs to be able to be independently switched in and out depending on the state of the app. To do this I've created a useTransition, wrapped in a custom…
lawrence-witt
  • 8,094
  • 3
  • 13
  • 32
0
votes
1 answer

Animation from react-spring fires off too fast with visibility-sensor and useEffect

I have wrapper React Component which makes its children fade in from right side and change opacity from 0 to 1, using react-spring and visibility-sensor. Both useEffect and useState make the chidren appear only once after first scroll in. The…
user11788161
0
votes
1 answer

what does interpolation really do

beginner here, i'm having trouble understanding interpolation with usespring in React spring library , im trying to make an element go back and forth with the translate css property, now what i do understand is that passing in a range emulates css…
david dami
  • 83
  • 1
  • 10
0
votes
1 answer

(React Spring) How to chain an animation in a child component after a parent component transistion completes?

(1) I have a standard page transition animation wrapping my Switch / in App /. That page transition applies on each Route /. (2) I then have animations inside specific components. For example I have a multi-stage transition inside of LandingPage /…
Z.M
  • 13
  • 2
0
votes
1 answer

Simple animation with useTransition in react-spring

I have a very simple example about useTransition, my expectation is whenever i click on the shuffle button, the items below swap around by a smooth animation. But i doesn't work, the item does swapping but also the pos property. I think my…
Sou
  • 143
  • 8
0
votes
1 answer

React Spring and useTransition

I am trying to use react-spring and I have a very simple animation for a component that should be moounted/unmounted on toggle. const state = useContext(MyContext) const transitions = useTransition(state.nav, null, { from: { tranform:…
Kaiser Soze
  • 1,362
  • 3
  • 14
  • 31
0
votes
0 answers

React + Spring - feels laggy

My page which downloads and displays data from API does Spring animations and they are really laggy. It is quite ok when there are like 1-5 items (but still choppy) and when there are like 20-30 items it's just horrible. This is my component which…
ablaszkiewicz1
  • 855
  • 1
  • 10
  • 26
0
votes
1 answer

React-spring useSpring() prevents viewport size from updating when window is resized

I have made a simple animation with a search bar using react-spring's useSpring(). When in focus, I want the search bar to change width, change its margin to 0, and change its top value to 0. The first issue I encounter is that the margin does not…
TalP
  • 3
  • 5
0
votes
1 answer

useTransition doesn't animate while cycling through an array

I created a little example on codesandbox to reproduce it. https://codesandbox.io/s/infallible-swirles-cbx74 I can easily cycle through the items array thanks to the following useEffect useEffect(() => { // taking the first element of the array…
3Dos
  • 3,210
  • 3
  • 24
  • 37
0
votes
1 answer

How to make react-spring replay animation?

I have a simple react site which displays drinks from the drinks-api. It basically works like this: when user presses button, the query gets updated, fetchItems runs and items are displayed this way
ablaszkiewicz1
  • 855
  • 1
  • 10
  • 26
0
votes
1 answer

React-spring: animate div containing an animated image

I'm trying to use react-spring to animate a div and an image inside this div, code below. So far, the dangleProps is working properly: the image is animated, however, the div isn't: hoveredProps isn't working for some reason, trying to figure it…
LD8
  • 176
  • 3
  • 14
0
votes
1 answer

Number showing as NaN

I'm using react-spring to make a component which counts from zero (0) to ten (10) over a 10 second duration: export default function Counter() { const props = useSpring({ from: { number: 0 }, to: { number: 10 }, config:…
Brand0R
  • 1,413
  • 11
  • 17
0
votes
0 answers

Using react-spring, how can I animate using `useSpring()` without supplying `from` values?

const animation = useSpring({ backgroundColor: hasBeenClicked ? 'green' : 'white', color: hasBeenClicked ? 'white' : '#7D7D7D', }); When using a simple useSpring it looks like they require a from value and a to value. This requires that the JS…
zeckdude
  • 15,877
  • 43
  • 139
  • 187
0
votes
1 answer

Trying to use React Spring with Semantic UI React, simple example

Hi everyone and thank you for your time. I'm trying to use Semantic-ui-React with React Spring, here i have a brief example... import React from 'react' import {Segment, Header} from "semantic-ui-react" import {useSpring, animated, config} from…
lichkuroro
  • 3
  • 2
1 2 3
…
29 30