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

Javascript to Clojurescript interop with react-spring

I am trying to implement react-spring (https://www.react-spring.io/docs/hooks/basics) into my Clojurescript proct and I am struggling to translate this to clojurescript import {useSpring, animated} from 'react-spring' function App() { const props…
user4148098
0
votes
1 answer

How to animate conditional elements in React

I have a React application. I am using React Spring for overall animations. I am not able to animate 2 things - The animation I am experimenting with is a simple opacity animation. import { useSpring, animated } from "react-spring"; …
Bijoy valappil
  • 139
  • 2
  • 12
0
votes
1 answer

How to change icons with React Spring?

I want to change the icon when I click on it with react spring. For example, when I click on "", it will change into "". In the documentation of react spring, it's possible to make it with the transition props, but how do I toggle it with…
aa087159
  • 23
  • 4
0
votes
1 answer

React Spring : How to apply parallax inside custom component

I would like to apply a parallax effect to the background image of my hero section, just like in this animation : https://dribbble.com/shots/7135284-homepage-for-a-a-Saas-company-bubblz. I wrapped the whole section in a Parallax component, and put…
Kevin Nkonda
  • 33
  • 5
0
votes
1 answer

How to make a div shake from side to side with react spring

I have started playing around with react-spring and I am loving the concept but I am struggling to work out how to build the animation that I want. I would like to make a div move to the right, then back to start, then to the right, but not as far,…
Exitialis
  • 411
  • 6
  • 26
0
votes
1 answer

Multistage transitions in react spring

I have a react-spring Transition starts when the component mounts. I want it to wait for 'x' seconds when enter is complete, then flip the show state so it can start leave.
Richard Hulse
  • 10,383
  • 2
  • 33
  • 37
0
votes
1 answer

Jerky movement in react-spring transition between two divs

I am using react-spring to create animations for "additional info" box with for an item selected by the user. Following the Simple Transition Demo from the documentation. I came up with an version for my use case: const Display = ({ item }) => (item…
Rob Cannon
  • 384
  • 4
  • 16
0
votes
1 answer

How to use React Spring in a HOC?

I am sure that this is relate to me not totally understanding how React Spring works or maybe HOCs. I am trying to create a HOC for React that adds a React Spring animation (slides the child component in from the left) const SlideLeft =…
Steven Matthews
  • 9,705
  • 45
  • 126
  • 232
0
votes
1 answer

How do I write a React Spring to change margin?

I tried writing a simple react spring to change my component's margin but it isn't working, the div just render with the "from" style. const gradients = useSpring({ from: { marginTop: '0' }, to: { …
Aej11a
  • 243
  • 1
  • 11
0
votes
1 answer

Can't get React Springs's useSprings to work

I'm trying to animate the position change of items in a list with React Spring. Having an item fade in with useSpring is straightforward: function App() { const [items, setItems] = React.useState([0, 1]); const handleClick = () => { if…
Evanss
  • 23,390
  • 94
  • 282
  • 505
0
votes
1 answer

How to fix simultaneously loading two components bug?

I used react-router-dom and react-spring's useTransitions, animated for page transitions, but transition animation works well, but there are some bugs. I think I can solve it with CSS, but I do not know what to do. If you know how to solve it, I…
user11356114
0
votes
0 answers

React-spring Transition didn't repeat animation

In my react app I have component, where I using Transition from react-spring. import { Transition } from 'react-spring' export class myComponent { state = { items: [] } static getDerivedStateFromProps(props, state){ const newItems =…
Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70
0
votes
1 answer

Problems with navigation

I have this router animation working on page load but when I use the navbar to navigate it changes the web address but the pages don't change or take extremely long to change. import React, { useContext } from "react"; import { createBrowserHistory…
TheGreen Lightbulb
  • 163
  • 13
0
votes
1 answer

How to handle shifting height when using translate3d with react-spring?

I'm trying to animate from/ to another component when I press a button. I am using useTransition from react-spring. When doing that, the animation works, however, my height shifts when the animation is ongoing. I've tried putting different positions…
Martin Nordström
  • 5,779
  • 11
  • 30
  • 64
0
votes
1 answer

upgrade react-spring code that uses animate and transition to latest react-spring

I have this code that uses react-spring 4.0.1 code: export const Nodes: React.FunctionComponent = ({nodes, nodeClickHandler}) => { return (
dagda1
  • 26,856
  • 59
  • 237
  • 450
1 2 3
…
29 30