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

Trouble with React Router v4 and MatchWithFade

This question is related to this post: React Router v4 Match transitions using React Motion ...but I thought it deserved its own question. I'm trying to figure out how to use the example taken from…
hairbo
  • 3,113
  • 2
  • 27
  • 34
0
votes
1 answer

Event Handler Inside React-Motion's Motion Tag Is Getting Ignored

I'm trying to re-create a sliding menu using React Motion. You can see my non-working example here: http://codepen.io/kirupa/pen/BQVzvQ (click on the blue circle to display the menu or to hide it) Here is my problem. The menu should disappear when…
Kirupa Chinnathambi
  • 212
  • 1
  • 2
  • 10
0
votes
1 answer

react-motion - adding this library to rails

Have anyone tried adding react-motion to a rails project? Have not seed any gems for this, but it would be kind of awesome to use it. What are the steps I have to make to use it? I have been trying to add all files to vendor/assets/javascrips and…
mdmb
  • 4,833
  • 7
  • 42
  • 90
0
votes
0 answers

react revert animation once it's finished

How do we do the animation again in the opposite direction once it's immediately finished? It works fine if I do this.setState({slideUp: !this.state.slideUp}); inside a click handler. It's just when setting the state in the animations rest function…
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92
0
votes
1 answer

How to change the background image with react-motion and loop through a bunch of images?

I am using react-motion to loop through a bunch of images. I'm trying to make the background change programmatically after a certain amount of time.
AziCode
  • 2,510
  • 6
  • 27
  • 53
0
votes
2 answers

React-motion div nesting

Here is the code frome the demo0-simple-transition from github. Link How do I add content to the moving div element. Was hoping to use a variation of this to run a fly out menu but can't seem to figure out how to get inner content into it.…
JGC
  • 73
  • 6
0
votes
1 answer

How react-motion determine the initial value to interpolate

All: Im pretty new to react-motion, I wonder when I use Motion like: {interpolatingStyle =>
} How do I know which value is the initial value it uses to interpolate for…
Kuan
  • 11,149
  • 23
  • 93
  • 201
0
votes
1 answer

Carousel built with ReactSwipeableViews does not show items

I am trying to implement this carousel using material-ui and react-swipeable-views. I have a carousel item that looks like this: import React, {Component, PropTypes} from 'react' export default class CarouselItem extends Component { static…
vamsiampolu
  • 6,328
  • 19
  • 82
  • 183
0
votes
1 answer

React-Motion Spring component causing Invariant Violation

I have (had) a working React component that just displayed a small string wrapped in a header tag. Since it was displaying properly, I am almost positive my import/export is set up correctly. When I try to add a component to my render()…
Jlegend
  • 531
  • 1
  • 6
  • 19
0
votes
2 answers

How to load Component dynamically in reactjs?

I'm working on a Reactjs + React-motion project, in a "modal window" (let's say) I'd like to mount or load a component dynamically, if that's possible ? My solution so far: I couldn't find a way, so it seems that it's easier to have the component in…
punkbit
  • 7,347
  • 10
  • 55
  • 89
1 2 3
4