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

react-spring deck example not working with NextJS

I'm trying to replicate this example with NextJS. The component gets rendered, but the content doesn't. Is SSR simply a limitation for this particular example?
Mike K
  • 7,621
  • 14
  • 60
  • 120
1
vote
1 answer

Media query based React Spring animations/transitions

I've got this React Spring transition working nicely: const Nav = () => { const[showMenu, setShowMenu] = useState(false) const navbgTransitions = useTransition(showMenu, null, { //FROM from: { opacity: 1,…
DesignAaron
  • 131
  • 7
1
vote
1 answer

Working with react-spring and styled-components

I can't get react-spring to work. I'm fairly new to this so I have no idea what is going wrong. I'm trying to make navbar appear from top to bottom to 40vh, but it doesn't appear to be recognizing the props passed. I used create-react-app and…
Cesar Marcial
  • 77
  • 6
1
vote
0 answers

Can't update the height of an element in React

I have an accordion with content (referred to as children). When I open and close it all is well But if the content inside changes its size, then nothing happens. How can I update the height of the wrapper when the height changes inside the…
Nobbs_Nobby
  • 31
  • 5
1
vote
1 answer

How to fade in element on scroll using React Hooks/React Spring

I'm attempting to create an animation in which one element fades based upon the scroll position of another. I was able to get the scrolling element to work using React Spring, but I'm struggling to wrap my head around how to leverage state hooks…
Tim Fischer
  • 15
  • 1
  • 4
1
vote
1 answer

how to swap elements on React Three Fiber / ThreeJs

I have this Card component, when clicked it activates and expands the block. wanted to click on one and then the other they switch positions. something like: // Initial Board 1,1,1,1, 2,2,2,2, 3,3,3,3, 4,4,4,4, and not alowing to same number on…
Iago Barreto
  • 103
  • 1
  • 11
1
vote
0 answers

react-use-gesture + spring - exclude nested elements from gesture recognition

I've got the following component that wraps other components and enables swipe navigation using react-use-gestures and react-spring. It works swell. You call it like so:
daino3
  • 4,386
  • 37
  • 48
1
vote
1 answer

How do I start the animation of a block when you scrolled through it in react-spring?

How do I start the animation of a block when you scrolled through it in react-spring?
Vova Shaplin
  • 55
  • 4
1
vote
1 answer

When ViewPager move to next slide then previous slide should decrease opacity value for every move

My requirement is when ViewPager click and drag image for next image then previous image should decrease opacity for every drag. This is my codesandbox code. This image is small example of my requirement. import React, { useRef } from…
Arpit
  • 1,423
  • 1
  • 17
  • 20
1
vote
1 answer

How to add a ternary operator in css in js with react spring

I want my page transition to happen conditionally based on screen size. I don't want the animation to happen on small screens. This is what I've written: const mq = window.matchMedia( "(min-width: 600px)" ) const transitions =…
jibaro
  • 103
  • 1
  • 12
1
vote
0 answers

How to prevent react-spring from starting animation on each state change?

I have a DIV panel with different controls that should be animated to show and hide at a certain moment of time. At the same time, there are lots of elements inside which have different states. The problem is when any element inside of the panel…
Epsiloncool
  • 1,435
  • 16
  • 39
1
vote
1 answer

Animating the addition of a box to a list of boxes in React

I have a horizontal row of boxes, right aligned. I want to add a new box to the right side by having it gradually slide in, moving the other boxes to the left as it does so. https://codesandbox.io/s/vibrant-curran-xqcbh?file=/src/App.js is where…
dumbmatter
  • 9,351
  • 7
  • 41
  • 80
1
vote
1 answer

React-spring how to animate letters of an array correctly

In this code with react-spring I am getting an animation where each letter waits until the previous animation ends, and also in the meantime it is being animated Why is this happening, and how could I fix it? const text = [...'hey there how are…
GWorking
  • 4,011
  • 10
  • 49
  • 90
1
vote
1 answer

react-spring: using useChain to scale and translate

I am currently using useTransition to make my mobile navigation appear: const MobileNav = ({show, toggle, styles}) => { let transition = useTransition(show, null, { from: {transform: 'translateY(-100%) scale(0.7)', ...styles}, enter:…
Jake
  • 120
  • 1
  • 7
1
vote
1 answer

React JS: Calling two functions in an onClick event does not run functions

I'm using React and React Spring. React spring has a toggle function that essentially maximizes a window on click. It looks like this: class Projects extends Component { constructor() { super() this.state = { instructions: true, …
Alex
  • 2,145
  • 6
  • 36
  • 72
1 2 3
…
29 30