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

React-Spring — Parallax Issue incorporating a nav and footer due to height constraints

I am using Parallax from react-spring to create a parallax effect. I understand that the can use the height of its parent to set its area. This solution, however, is causing a strange behaviour when scrolling by keeping the and visible on the…
Diego Oriani
  • 1,647
  • 5
  • 22
  • 31
9
votes
3 answers

React-Spring - Change Transition Animation Speed

I'm trying to change the speed of the default fade-in and fade-out transition, but the documentation does not seem to mention how to do so: {show…
Phil
  • 3,342
  • 5
  • 28
  • 50
9
votes
3 answers

Using react-spring for react-native

I want to use this library for react-native but couldn't figure out how. The documentation link for react-native is broken. Can i use the library for react-native?
Murat Erdogan
  • 798
  • 2
  • 10
  • 21
8
votes
4 answers

React spring Errors while installing

Hi I have this problem where if I want to install react-spring into my react project It just pops up bunch of dependencies errors and warnings and I don't know what to do with it. I tried to check documentation of react-spring but I couldn't find…
2click
  • 106
  • 1
  • 1
  • 5
6
votes
1 answer

Animating bufferAttribute with react-three-fiber and react-spring

I have simple Points mesh with custom shader and buffer geometry. The geometry has position, size and color attributes. On pointer hover, the hovered vertex turns into red color. So far so good. Now I would like to animate the change of color of the…
mtx
  • 1,196
  • 2
  • 17
  • 41
6
votes
0 answers

How to test an animation that has same start and endpoint?

I have a component that "shakes" when animated prop is set to true. This is how it looks const Shake = ({ animate, children, ...props }) => { const { x } = useSpring({ from: { x: 0 }, x: animate ? 1 : 0, config: { mass: 12, tension:…
ccc1da70-5e63-4879-a4cb-adb604
  • 329
  • 1
  • 7
  • 18
6
votes
0 answers

react-spring: Can I really only set height by viewport heights (via `pages` attribute)?

I'm attempting to use react-spring to create a parallax effect on my site. I want the parallax container to be the background of the entire site, plus a 100vh "footer" at the bottom. Here's a simple diagram of what I mean: My issue is, according to…
damon
  • 2,687
  • 8
  • 25
  • 35
6
votes
2 answers

Animation duration in React Spring

I have a fairly simple fade-in scenario, where I want to control the duration of the animation. But cannot wrap around my head around how to accomplish this. Code excerpt: function BoxA() { return (
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
6
votes
3 answers

What does "animated" do in react-spring?

I am currently getting to grips with the react-spring animation library. In some of the CodeSandbox demos (e.g. https://codesandbox.io/embed/j150ykxrv) in the documentation, something is imported called "animated": import { Transition, animated }…
Antfish
  • 1,313
  • 2
  • 22
  • 41
5
votes
1 answer

How can I run a react-spring animation in reverse?

I have an animation that works great moving items in from the right and off to the left. I want to do the opposite when the back button is clicked, similar to popping a View off the navigation stack in a mobile application. My code is below, how can…
Josh
  • 2,547
  • 3
  • 13
  • 28
5
votes
0 answers

React-spring Parallax

Description I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the containers in a responsive / uniform way. Reproducible snippet Here I made a snippet which contains a basic parallax effect…
ale917k
  • 1,494
  • 7
  • 18
  • 37
5
votes
1 answer

React JS: How to use responsive styles with react-spring

I am new to building websites with Gatsby and thus React JS. Problem I want to make a simple animation based on the css transform property using react-spring. As I use styled-components (with theme.js file), I want the animation to be responsive…
Legalith
  • 51
  • 3
5
votes
3 answers

How to scroll to an element using react-spring?

I have read through the entire react-spring docs and there doesn't seem to be a clear way to do this. My attempt: import React, { useRef, useState } from "react" import { animated, useSpring } from "react-spring" const App = () => { const…
user11834465
5
votes
1 answer

How to prevent component re-render (update) inside animations with REACT

These past few days, i've been playing around with different animation libraries for React, in an effort to find a solution for transitioning between views (not routes), where a view would be a component wrapping other components and so on. so far i…
man
  • 498
  • 5
  • 12
5
votes
4 answers

react-spring interpolate function not work with typescript

I decided to introduce TypeScript in my React js application. Having a problem with a component that uses react-spring for coordinate interpolation. BEFORE TypeScript my component was like this: function Card() { const [props, set] =…
Manu
  • 51
  • 1
  • 3
1
2 3
…
29 30