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
1
vote
2 answers

How to do a simple fade in transition on React Motion?

I have this basically: {style => { return
But the opacity chops and takes a while. I just want to say "fade in…
Lance
  • 75,200
  • 93
  • 289
  • 503
1
vote
1 answer

How to map inside the TransitionMotion wrapper?

I'm trying to implement react-motion's TransitionMotion wrapper and made it to the home stretch but there's one more issue. In this example the interpolated -array consists of two elements (because chartConfigs.length is currently 2) and I've nested…
jubi
  • 11
  • 3
1
vote
1 answer

ReactJS react-motion with calc() from CSS

I'm trying to accomplish the following while using calc() inside a template string:
fillipvt
  • 556
  • 3
  • 14
1
vote
0 answers

React Motion interpolated styles not updating

I am trying to do a mount/unmount animation for a list of items (coming from Redux) using React Motion's TransitionMotion (docs): // import statements @withRouter @connect(state => ({ store: state.example })) export default class Example…
earthling
  • 555
  • 4
  • 14
1
vote
1 answer

Unable to animate React-Konva Circle using React-Motion

I am using React-Konva to draw shapes in my app. I have drawn a circle inside another circle and grouped them. Now, what I want to do is that on a button click the circles should animate (move horizontally). Here is my related code: …
Arslan Tariq
  • 2,478
  • 2
  • 22
  • 45
1
vote
1 answer

On react-motion, how to reset an animation?

In a certain UI a person can update an image, whenever they upload a new image I want the previous one to fade into the new one. The problem is that the animation runs only for the first change: return(
Ramon Balthazar
  • 3,907
  • 3
  • 25
  • 34
1
vote
1 answer

How to get the cumulated height from children elements within a parent component

really sorry about that weirdly formulated question. I am looking to create a a short spring animation with react-motion. Please bear with me: I have a component that loads a list of local directories and files inside a frame, a bit like a mac…
Jeanmichel Cote
  • 531
  • 1
  • 5
  • 19
1
vote
0 answers

React motion: animation on hover gets laggy after multiple times

I'm quite new to React and all the fancy stuff. On google-react-map, there's a few markers. Each of them have an Icon I want to scale on hover. I use styled-components for styling const Icon = styled.div` width: ${MARKER_SIZE}px; height:…
sebap
  • 1,601
  • 5
  • 24
  • 41
1
vote
1 answer

React Motion willEnter and willLeave not firing

I am trying to get react-motion up and running but for some reason the methods willEnter and willLeave don't seem to be firing when using TransitionMotion. Currently my setup is as follows: import React, { Component } from 'react'; import…
Tom Pinchen
  • 2,467
  • 7
  • 33
  • 53
1
vote
1 answer

React Router v4 Match transitions using React Motion

I'm loving RR4 and RM, there's already great examples for React Router V4 (https://github.com/ReactTraining/react-router/tree/v4/website/examples) but i'm struggling to understand how I can use the new V4 API to transition between different Matches…
Paul Crabtree
  • 13
  • 4
1
vote
0 answers

can't get TransitionMotion to work in React Motion

I'm trying to render a set of data (this.props.data) in React with mount/unmount animation using react-motion TransitionMotion and spring. This data is being updated from a separate component, via a search/filter function. I tried my best to follow…
Jerome Indefenzo
  • 967
  • 6
  • 25
1
vote
0 answers

Any concrete example about how to use react-motion for SVG path with D3?

All: I am pretty new to React-Motion, most examples on its github is about how to interpolate single number, I wonder I want to apply a array of data objects to it, how can I implement this? My use case is to implement same effect of transition from…
Kuan
  • 11,149
  • 23
  • 93
  • 201
1
vote
1 answer

Animate React rearranging of list items

I have an array of JSON objects that are used to render a list of elements: mydata.map(thing => { return }); Each rendered item has up/down arrows, and if the user clicks the up arrow, for example, the item will…
ffxsam
  • 26,428
  • 32
  • 94
  • 144
1
vote
1 answer

React Motion CSS transform from center

I am using react-motion for CSS transfrom in react. this bellow code scales my desired output from top left corner. {(value) => { return (
Rafi Ud Daula Refat
  • 2,187
  • 19
  • 28
0
votes
1 answer

Can't resolve 'react-motion'

I am having troubles on runnning a code online, it's the sliding image puzzle from this link: https://www.youtube.com/watch?v=_wdbhVvMOCs and here is the github from the video's description: https://github.com/danba340/react-sliding-puzzle If I type…
Mimist0p
  • 1
  • 1
1
2
3 4