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

is it possible to animate a strikethrough with React Spring?

I'm new to React Spring and I initially tried this const strikeProps = useSpring({ textDecoration: "line-through", from: { textDecoration: "none" }, }); But it's not working. I think there should be a way simulate the CSS solution for this.
Alec Gerona
  • 2,806
  • 1
  • 24
  • 24
0
votes
1 answer

React spring animation on drag OR click

Using react-spring and react-use-gesture I want to have a carousel animation that can be activated by dragging OR clicking on a button. I've figured out a solution: https://codesandbox.io/s/viewpager-6o78r?file=/src/index.js Putting a setTimeout in…
Bill Johnston
  • 1,160
  • 1
  • 14
  • 31
0
votes
1 answer

How to add reactSpring on useEffect instead of onMouseOver event?

i have an animation on the onMouseOver with React-spring. But i want the animation on the pageload (useEffect). Has anyone an idea how to fix that. export function Hero({ image, text, button }) { const heroRef = React.useRef(null) const…
Melissa
  • 719
  • 1
  • 6
  • 16
0
votes
0 answers

React-js and react-spring => How to scale a div while scrolling

I'm creating a website using reactjs and react-spring, and I have some Images that should scaleUp or scaleDown , when it's inview and the scaling UP/DOWN should stop when user stop scrolling and continue when user start scrolling again. thank you
Nesma Elsharkawy
  • 51
  • 3
0
votes
1 answer

How do I mount/unmount a component in React with a keystroke?

I'm making an app that renders 3d objects on keyboard press. I would like these objects to disappear after 2-3 seconds, or when the animation is finished playing. This is a component that handles the key pressed logic: const Selector = () => { …
charlieyin
  • 371
  • 6
  • 16
0
votes
1 answer

React Spring doesn't work/load on components?

I have the following component named as test.js with the component: import React, { useRef, useState, useEffect, useCallback } from 'react' import { render } from 'react-dom' import { useTransition, animated } from 'react-spring' import…
Aajinkya Singh
  • 543
  • 1
  • 6
  • 14
0
votes
0 answers

React-Spring too lazy with amount number of lists

I use React-Spring in my app. use Transition to add animation when components mount or unmount. less then 20 lists, it work well, but more then 25 lists, it work too lazy or freeze. I try to reproduce on codesandbox, but it has no problem. Is there…
MIsoku
  • 25
  • 5
0
votes
1 answer

Fix height offset when transferring from one page to another

I have prepared this demo which transitions from one page to another using react-spring and there is this height offset. When you scroll down on page 1 and click on an item, page 2 loads too high. How is this problem called in webdev? I can't find…
ablaszkiewicz1
  • 855
  • 1
  • 10
  • 26
0
votes
1 answer

Error adding animation on create and delete item list using react-spring to XMasonry layout

I am making an simple google Keep-like note react app. I use XMasonry for layout. and I want to add animation using react-spring to make it fade in and out on delete and create item list. But I keep getting error why trying to make Xmasonry work…
jaymikaelson
  • 31
  • 5
0
votes
1 answer

useTransition in React Spring causes too many rerenders

I'm using useTransition from react spring to build a masonry-gridish display of animated words for a blog. My work is heavily based on react spring's official codesandbox demo of a masonry grid which can be found here:…
Seanyboy Lee
  • 165
  • 1
  • 12
0
votes
1 answer

How do I smoothly delete an element from an array with react-spring?

Made animated deletion and the emergence of elements of the array. But I don't know how to make a smooth collapse of elements when removing one of them. Here is a simple example on…
Vova Shaplin
  • 55
  • 4
0
votes
2 answers

useTransition mounts new object instantly

I am trying to figure out how to utilise useTransition for page transitions (simple opacity change where first page fades out and new one fades in). So far I have this small demo going https://codesandbox.io/s/sleepy-knuth-xe8e0?file=/src/App.js it…
Ilja
  • 44,142
  • 92
  • 275
  • 498
0
votes
1 answer

Why is my element got delayed before leaving and not being animated in Transition Component using React-Spring?

So, I was basically creating my own Slider using React-Spring, Here is the code for Slider.js: import React, {useState} from 'react' import {animated} from 'react-spring' import {Transition} from 'react-spring/renderprops' import…
Renaldi Arlin
  • 51
  • 2
  • 8
0
votes
1 answer

Elements stacking over each other instead of transitioning in spring react

I made a testimonials carousel and I wanted to integrate a springs react animation to it. I've only been working with spring react for a few days and this is an error I haven't seen before. Elements stack over each other. For my transitions I have:…
jibaro
  • 103
  • 1
  • 12
0
votes
1 answer

React: Spring transition not behaving properly

I recently got started with both React and JavaScript. I've been reading the Spring API docs for the Transition component, and ended up with this piece of code when doing some tests. Now, I expected a smooth transition, but got the following…
nachosanchezz
  • 3
  • 1
1 2 3
…
29 30