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

React Query optimistic update with React Spring animation

I'm using react query mutation to create an object and update UI optimistically const queryClient = useQueryClient() useMutation({ mutationFn: updateTodo, onMutate: async newTodo => { await queryClient.cancelQueries({ queryKey:…
kabukiman
  • 185
  • 14
4
votes
2 answers

react-spring how to use animated(Component)

I am trying to sort out some performance problems in an image slider and I have discovered that using animated.img yields much better performance than using animated.div with some react component inside. The react component obviously isn't just…
Mathias Nielsen
  • 125
  • 1
  • 2
  • 7
4
votes
4 answers

Using onclick in children

I'm recently using react-spring and it works really well but I'm having some issues when I have to apply an onClick on childs. Here is my main structure: 1 - o), transform…
Trisma
  • 735
  • 6
  • 19
4
votes
3 answers

Modal component renders Twice on open

I'm using react-spring to animate a Modal based on @reach/dialog. The Modal can have any children. In the children I'm fetching some data based on some prop. The problem is that the fetch call is made two times on opening the modal. I think it has…
Joaquín Romero Franco
  • 138
  • 1
  • 8
4
votes
2 answers

Using react-spring useSprings with dynamic items array

I am attempting to use react-spring's useSprings to enable users to reorder the items in a formik FieldArray. The useSprings Draggable List demo (found here) uses useRef to manage the order of items. FieldArray comes with a number of array helper…
Stafford Rose
  • 769
  • 4
  • 9
4
votes
1 answer

How to use react-spring from react component classes

I am trying to import react-spring animation library to a reactjs application which is based on react component classes. It seems that new (as of 2019) React Hooks made some integration messier. So that is why I am asking how to use react-spring…
Mehmet Kaplan
  • 1,723
  • 2
  • 20
  • 43
4
votes
0 answers

What is the correct way of translating with onclicks with react-spring

const props = useSpring({ transform: toggle ? "translateX(-200px)" : "translateX(0)", opacity: toggle ? 1 : 0 }); I currently have a div with above styles and opacity works fine with the onclicks, but i'm having trouble with…
Francis Chang
  • 137
  • 8
3
votes
2 answers

React-spring useTransition on carousel style component causing overlap during transition

I'm trying to make a Modal which will display a few slides in a carousel-style component, and just make some simple enter/exit animations on slide change. I'm using the useTransition hook from react-spring, and the problem is that when a transition…
Edan Parker
  • 43
  • 5
3
votes
0 answers

React App becomes slow after long usage in safari

I'm running a learning app written in react. The average session duration is 15 Minutes. Recently some Safari users (mobile and desktop) reported that the apps feels laggy after a fair bit of use (answering questions). I monitored memory used in…
maltesar
  • 181
  • 1
  • 7
3
votes
2 answers

useTransition on Array return undefined Array propeties (React Spring)

I'm quite new to React Spring, so when I use UseTransition on an array of object the value return from it is undefined const transitions = useTransition(people, (item) => item.id, { enter: { transform: "translateX(0rem)", opacity: 1 }, …
James_dawn
  • 33
  • 3
3
votes
1 answer

react-spring - animate

elements on content change

The following code is a simple react component that uses react-spring to animate the p (animated.p) elements. The animation is defined in the fadeInconstant and is assigned to the animated.p elements via the style={fadeIn} tags. //returns and…
marco1618
  • 33
  • 6
3
votes
0 answers

Next.js react-spring- useTransition doesn't work

I'm new to using react-spring. I am trying to add it to my nextjs website project but its not working. This is my code for using the custiom hooks from react-spring official website. This is the code ; import React, { useState, useEffect } from…
GatesVert
  • 56
  • 3
3
votes
1 answer

Build reusable Animation component with react-spring without rendering a wrapper element

I'd like to build a re-usable animation component with react-spring. Here's what I have so far: codesandbox const Fade = ({ show, as = "div", children }: { show: boolean; as?: keyof JSX.IntrinsicElements; children: React.ReactNode; }) =>…
jchi2241
  • 2,032
  • 1
  • 25
  • 49
3
votes
1 answer

useSprings with TypeScript

function getDefaultOrder(items: any[]): number[] { return items.map((_, index) => index); } type SpringsHandler = (index: number) => T; type SpringValues = { zIndex: number, y: number, scale: number, shadow: number, immediate:…
Sou
  • 143
  • 8
3
votes
1 answer

react-spring clean scale and translateX transition

The react-swipeable-views library is providing example usages. I want to reuse the coverflow example, but in a react functional comp. way. I almost managed to get it working. However on my implementation, the swipeable element can get stuck during…
MarcoLe
  • 2,309
  • 6
  • 36
  • 74
1
2
3
…
29 30