CODEWITHSUNDEEP
reactjsreact-spring
Exitialis
Exitialis

Reputation: 411

How to make a div shake from side to side with react spring

I have started playing around with react-spring and I am loving the concept but I am struggling to work out how to build the animation that I want.

I would like to make a div move to the right, then back to start, then to the right, but not as far, back to start, to the right, but not as far again and finally back to start. Just like a spring, that is pulled and when released goes boingoingoing back to it's resting place.

I can see from the documentation how to adjust the feel of the spring and how to trigger the animation, but I have never made an animation before so knowing which properties to change and how to make it loop properly are what I am looking for help on.

Edit: I have this animation so far, and it works, but it feels very disjointed. 

const shake = useSpring({ 
    from: { "margin-left": 0 },
    to: [
        { "margin-left": 30 },
        { "margin-left": 0 },
        { "margin-left": 20 },
        { "margin-left": 0 },
        { "margin-left": 10 },
        { "margin-left": 0 }
    ],
    config: {
        mass: 1,
        tension: 500,
        friction: 10
    }
});

Currently it is clearly three movements, can I decrease the delay between the movements so that it looks like one movement?

Is margin left the best CSS property to use?

Upvotes: 0

Views: 4338

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

UPDATE START

I just came across a simple solution for this problem. It I way better than the one I tried to achieve with configuration. It uses interpolation with range. It is using transform now but can easily adopted to margin.

export default function App() {
  const { x } = useSpring({
    from: { x: 0 },
    to: { x: 1 }
  });

  return (
    <div className="App">
      <animated.div
        style={{
          transform: x
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [180, 220, 180, 220, 180, 220, 180, 200]
            })
            .interpolate(x => `translate3d(${x}px, 0px, 0px)`)
        }}
      >
        Shake
      </animated.div>
    </div>
  );
}

https://codesandbox.io/s/awesome-framework-go5oh?file=/src/App.js:103-609

UPDATE END*

You can achieve the bouncy effect. There are 3 variable controlling the spring based animation:

  • mass
  • friction
  • tension

You can play with the pink square here: https://www.react-spring.io/docs/hooks/api I recommend low mass and friction and high tension. You can set these variable in every animation type. For example:

useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });

Upvotes: 1

Related Questions