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
0
votes
1 answer

How to remove vertical spaces between absolute positioned elements in React-Motion

So, I am trying to create a draggable list with React-Motion in my project. However, I couldn't figure out a way to remove the spaces between the list (see the picture below). I read somewhere that it is due to the nature of absolute elements in…
erwinleonardy
  • 486
  • 8
  • 14
0
votes
1 answer

How to scroll to section with React staggered button props

I am trying to modify this button menu: (please click link to see the fiddle) https://codepen.io/andytran/pen/YGyQRY I want to create an onclick event OR scroll to section property, on the individual buttons. This is the array: const iconArrayOne =…
marialaustsen
  • 105
  • 3
  • 14
0
votes
2 answers

How to show Vertical Progress Bar in react-transition-group with animation

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.
Arpit
  • 1,423
  • 1
  • 17
  • 20
0
votes
1 answer

Animate scale react

I am trying to animate the scale of my react component. It seems fairly simple and this was basically right out of the React-Motion examples: var component = () => { let style = { scale: spring(1.1, presets.wobbly)}; return (
Ryan Cocuzzo
  • 3,109
  • 7
  • 35
  • 64
0
votes
1 answer

React Motion: simple chaining

I'm using react, mobx and I need to animate things. I want to do a simple animation chaining: when the first animation ends, the second starts. As use case think of a section templates: every time the user change the section, the current section…
nkint
  • 11,513
  • 31
  • 103
  • 174
0
votes
0 answers

React Motion: Leaving object becomes visually indistinguishable from entering object

I am trying to create a basic animation with React Motion: I have two elements, either of which can be displayed depending on the component state. When the state changes, I want one element to replace the other. The replacement animation is a…
azangru
  • 2,644
  • 5
  • 34
  • 55
0
votes
1 answer

React-motion rendering on every animation

I'm getting really bad performance using React-Motion (https://github.com/chenglou/react-motion). I'm animating the height of a dropdown from a table row from 0 to 260. constructor() { this.state = { opened: false } …
patrickhuang94
  • 2,085
  • 5
  • 36
  • 58
0
votes
1 answer

Delay in Rendering a Component?

I'm attempting to make my own personal website, and trying to use React to do so. In the process, I intend to make each section a different React Component. My plan is to have the navbar at the top be able to select which component is currently…
MFarejowicz
  • 1
  • 2
0
votes
1 answer

Slide Transitions in React JS and absolute positioning

I'm trying to facilitate a view transition where one large container component slides in from one side while the other slides out to the other. I can get all of the discrete animations to work no problem with react motion, however, I'm at a loss as…
MFave
  • 1,044
  • 2
  • 8
  • 19
0
votes
1 answer

React-Motion - Forced to hold button for spring animation

I'm trying to animate these two inputs to the right by 400 pixels and I've copied this pretty much word from word from the demo, but I'm forced to hold the button I've tied the animation to, and I'm not sure why. I was wondering if you guys could…
Setsuna F. Seiei
  • 25
  • 5
0
votes
1 answer

React, redux and react-motion

In APP: …
alexandr2006
  • 19
  • 3
0
votes
0 answers

How to do animated side to side motion with react-motion

I want to make a div go from side to side 3 times after clicking a button. I can accomplish it using the code below. jsfiddle here var Thing = React.createClass({ getInitialState: function () { return { left: 0 } }, sideToSide:…
chevin99
  • 4,946
  • 7
  • 24
  • 32
0
votes
1 answer

React-motion with redux

I am trying to animate adding a new comment in my React + Redux app with react-motion. class Comments extends Component { getDefaultStyles() { const { comments } = this.props; return comments.map((c, i) => { return { …
mdmb
  • 4,833
  • 7
  • 42
  • 90
0
votes
1 answer

Why can't I use curly braces in the body of my Motion callback?

In the simplest example: import {Motion, spring} from 'react-motion'; // In your render... {value =>
{value.x}
} Which works for me, if I put curly braces around the body…
AveryIsDasein
  • 23
  • 3
0
votes
1 answer

Nested Match routes with React Router v4 and MatchWithFade

This question is a follow-up to this: Trouble with React Router v4 and MatchWithFade I've got another (potentially silly) question about using MatchWithFade and React Router v4. What I'd like to do is have nested routes, so a top-level component…
hairbo
  • 3,113
  • 2
  • 27
  • 34
1 2
3
4