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

How can I animate between 2 states in React and see both states during transition

I am have a component that is used to navigate a list, when I select an item I want to slide into another list, but the same component is used and only difference is state. I am struggling to understand how I can see both states (almost like 2…
jonnie
  • 12,260
  • 16
  • 54
  • 91
3
votes
0 answers

react-spring and react-intersection-observer - tons of rerenders

JSFiddle Code: export default function App() { const spring = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }); const [ref] = useInView(); rerenders++; return (
John Smith
  • 3,863
  • 3
  • 24
  • 42
3
votes
2 answers

react-spring and framer-motion laggy on firefox

I have problem with two animation libraries(react-spring, framer-motion). I was trying to make simple animation in moment when component is first time visible. (it's simplify version)
itsnotmikhael
  • 37
  • 1
  • 7
3
votes
2 answers

How to execute two animations sequentially, using react-spring?

I tried chaining two springs (using useChain), so that one only starts after the other finishes, but they are being animated at the same time. What am I doing wrong? import React, { useRef, useState } from 'react' import { render } from…
eduter
  • 71
  • 2
  • 5
3
votes
1 answer

I am trying to animate an array of letters in my React Hangman App

Problem I am trying to use react-spring to have letters from an array animate in and out for my Hangman App. I want them to fade in on load, and fade out when removed from the array. They are removed from the array on click. For now I just want them…
user3616944
  • 41
  • 3
3
votes
1 answer

Getting error "TypeError: rangeValue.replace is not a function" when attempting to animate using React-Spring

I am trying to animate an h1 when a variable becomes true. Here is some code: const styles = useSpring({ from: {opacity: 0}, enter: {opacity: 1} }) return ( // this is a component I have built, it has a function in…
Arat2003
  • 841
  • 1
  • 5
  • 8
3
votes
1 answer

How to re-animate react-spring animation using hooks on button click?

Following simple component from the official examples: import {useSpring, animated} from 'react-spring' function App() { const props = useSpring({opacity: 1, from: {opacity: 0}}) return I will fade…
oemera
  • 3,223
  • 1
  • 19
  • 33
3
votes
0 answers

Invalid Hook Call in shared module using react-spring

I have a create react app that uses a shared module via customize-cra and I am attempting to use react-spring within this common module. I am unfortunately getting the dreaded Invalid Hook Call notification: Invalid hook call. Hooks can only be…
Nick Palmer
  • 2,589
  • 1
  • 25
  • 34
3
votes
0 answers

Need to set boundaries to div with drag enabled with react-gesture and react-spring

I'm using a react-use-gesture package to move a div on drag event but need to set boundaries. Do I need to use the interpolate method from spring to set those boundaries or should I add parameters to the useSpring().set method? Without velocity, it…
mathieu hamel
  • 51
  • 6
3
votes
1 answer

Issues on animating a conditionally rendered component using React-spring

I am new with react-spring. I am having trouble animating a component whenever it unmounts. I have a simple card with an onClick handler that's responsible for conditionally displaying my Overlay component. The animation works fine when mounting…
user7382031
  • 55
  • 1
  • 1
  • 6
3
votes
1 answer

Simple react-spring component not working in gatsby - Element type is invalid: expected a string or a class/function but got: undefined

Trying out react-spring, using a simple tutorial. However, it's not working for me. Here's my code: import React, { Component } from "react" import { Spring } from "react-spring" export default class Box extends Component { render() { return…
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
3
votes
0 answers

How to test a react component which uses react-spring?

I'm trying to test my SpringComponent. This component uses react-spring for animations. When I run my test I get the following error: "Jest encountered an unexpected token". If I comment my Spring code the error disappears and my test passes.…
Tim MG
  • 426
  • 5
  • 17
3
votes
1 answer

Test callback prop with Enzyme

I have React-Spring animation in my component: changeView(VIEW_MODES.RECEIPT) : null}> .... Where I pass function call inside onRest prop - this is the…
Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70
3
votes
1 answer

React-spring how can you use a width % in a Spring object?

I have some problem animating my progress bar component ... I am trying to animate my component (by filling the progress bar component width from 0% to X% with a Spring when it is visible on the screen (by using VisibilitySensor). I have tried a few…
GBab
  • 31
  • 1
  • 2
3
votes
1 answer

How to create a Parallax Fixed Header with react-spring

I want to create a Parallax Fixed Header effect (fixed header scrolling body), like the one used in these pages. http://somethingsplendid.com/ http://jsfiddle.net/KsdeX/1/?utm_source=website&utm_medium=embed&utm_campaign=KsdeX How can I achieve it…
Albert Alises
  • 1,018
  • 1
  • 8
  • 19
1 2
3
…
29 30