search

chenglou / react-motion

A spring that solves your animation problems.
MIT License
21.68k stars 1.16k forks source link

Two-way animations #560

Closed WebDeg-Brian closed 5 years ago

WebDeg-Brian commented 5 years ago

Is there a way to do two-way animation (e.g shaking animation)? Like this:

<Motion 
    defaultStyle={{
      ypos: -110
    }} 
    style={{
      ypos: spring(-110) 
      //This is definitely not correct, but I want spring to animate to a certain value
      //Then go back to -110, so the component looks like it's shaking?
    }}>
      {({ypos}) => 
        <AnimatedBox />
      }
  </Motion>
nkbt commented 5 years ago

You can keep your own state and when previous animation is finished, "flip the switch"

See https://github.com/nkbt/react-motion-loop for example

WebDeg-Brian commented 5 years ago

@nkbt Thank you for your quick response, will try it out!