Stack Overflow
Stack Overflow

Questions tagged [react-motion]

react-motion is a react javascript package to provide physics based spring animations to react components.

react-motion provides a simple way to apply physics based spring animations to reacgt components. The animations are controlled by stiffness and damping settings as opposed to hard coded easing curves.

It works by providing interpolated css styles that act as tweens in an animation. You provide a start and end style (keyframe) and react-motion will calculate the intermediate style on each rendered frame based on the stiffness and damping.

react-motion is unique in that it uses the function as props technique to easily access the intermediate styles.

Resources Github page for react-motion enter link description here

55 questions
145
votes
23 answers

React - animate mount and unmount of a single component

Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is. All I want to do is animate the mounting & unmounting of a React component, that's it. Here's what I've tried so far and why each solution…
ffxsam
  • 26,428
  • 32
  • 94
  • 144
6
votes
1 answer

How to use React TransitionMotion willEnter()

Using React Motion's TransitionMotion, I want to animate 1 or more boxes in and out. When a box enters the view, it's width and height should go from 0 pixels to 200 pixels and it's opacity should go from 0 to 1. When the box leaves the view, the…
Learner
  • 2,459
  • 4
  • 23
  • 39
5
votes
1 answer

Restart animation on state/props change in react-motion

I am trying to animate breadcrumbs using react-motion from x: -20 to x: 0. Folder > SubFolder > Child The issue is, the breadcrumbs animate perfectly on the first render. Subsequently when the props or even state changes, the animations are not…
sanchit
  • 2,328
  • 2
  • 18
  • 22
5
votes
0 answers

React-motion mobile wep performance is too low

I'm creating website with React + React-Router. I used react-router-transition to animate on switching views, and used React-motion-ui-pack to animate for little components. The problem is when I tested on Desktop PC, animation is fine, but tested…
modernator
  • 4,341
  • 12
  • 47
  • 76
3
votes
1 answer

How to animate conditionally-rendered components?

I'm trying to use React Motion UI Pack to animate the slide-in/slide-out animation for my Side Navigation. This is it: constructor(props){ super(props); this.state = { isThere: false, showOverlay: false } this.updatePredicate =…
Jakub Strebeyko
  • 676
  • 1
  • 9
  • 22
3
votes
1 answer

Rotating and Scaling with React-Motion

Struggling to get my head round 'rotating' and 'scaling' in React Motion v4 and cant seem to find much about how to do it online. Its easy to change a simple css property along with a simple state change like below:
Timmy Lee
  • 785
  • 1
  • 11
  • 25
2
votes
1 answer

Snapshot testing with react-spring/react-motion

I am trying to snapshot test my React components with Jest and Enzyme. Some components have the animation component (imported from react-spring/react-motion) in them, which renders a function as its child. This makes testing incredibly hard. I did…
Brian Le
  • 2,646
  • 18
  • 28
2
votes
2 answers

How to make React animation on Hover?

I need to move menu item underline like in this example. With jQuery I would do it simply getting left position and width of a menu item. And then perform stop.animation on hover. I'm trying to do such animation with React. But I can't figure out…
Nastro
  • 1,719
  • 7
  • 21
  • 40
2
votes
1 answer

What is the best approach to build sequential animations with Reactjs?

There are various tools to help an individual to build animations with ReactJs. But each one has its own shortcomings. Following are the tools that I've explored till now: ReactCSSTransitionGroup : Quite effective but I don't like how it introduces…
Sourabh Kumar
  • 21
  • 3
2
votes
0 answers

react animation on img src change from an array

I have this react code that changes the img src onClick, it gets the new img src from an array, I now want to add an animation to it using react-motion, Everytime the img src changes I want to play the animation so far I got it working threw a ?…
HMH
  • 157
  • 1
  • 2
  • 11
2
votes
1 answer

Animating exit of an element in React Motion (which receives these elements from a parent component)

Background I am trying to create a container for a collection of elements, each of which can be removed from the collection. When an element is removed, I want to animate its exit, and I am trying to achieve this using React Motion. Here's a diagram…
azangru
  • 2,644
  • 5
  • 34
  • 55
2
votes
0 answers

How to add unmounting animation with React Motion?

I want to add unmounting animation with React-Motion, but I can't found any information about that. This is my code: {this.state.uploading ? ( { interpolatingStyle =>…
modernator
  • 4,341
  • 12
  • 47
  • 76
2
votes
2 answers

How to clone a react element for dragging purposes

So, I have a list, and I can now drag elements (divs) out of that list, using react-draggable. React-draggable makes the original element draggable (makes sense), but I need to drag a copy (clone) of the original element, and keep the original…
Yaniv Ran
  • 31
  • 1
  • 8
1
vote
1 answer

React-spring how to animate letters of an array correctly

In this code with react-spring I am getting an animation where each letter waits until the previous animation ends, and also in the meantime it is being animated Why is this happening, and how could I fix it? const text = [...'hey there how are…
GWorking
  • 4,011
  • 10
  • 49
  • 90
1
vote
0 answers

how to use react-motion library with modals

I am using react-modal to create modals, and trying to slide the modal from bottom of page. For that i am trying react-motion TransitionMotion Component. My code is: { this.state.openNumberPopup &&
rajatgalav
  • 329
  • 1
  • 6
  • 19
1
2 3 4