Popmotion: Bounce Effect

Question

As seen below, I tried to create a bounce effect at the end of another animation, in Popmotion.

I was not sure how to go about it, so I tried to reverse the velocity once it hit a certain threshold.

The results are sporadic and does not always work.

Any ideas on how to best create a bounce effect with Popmotion?

Clarification 1

The ball bounces most of the times, but how long it bounces varies greatly. Sometimes it stops abruptly after just one bounce. I am not sure why that is, because I do not fully understand how the solution actually works. Why does it slow down, if we simply reverse the velocity. Looking at the code, my guess would have been that the ball would oscillate indefinitely, but it does not.

Clarification 2

In Firefox 65.0.1, the animation seems consistent. In Chrome 72.x, it acts irrationally. I.e. the animation and bounce length changes each time.

const {
  tween,
  styler,
  value,
  easing,
  physics,
  transform
} = popmotion;
const {
  clamp,
  pipe,
  conditional
} = transform;

const ball = document.querySelector('#ball');
const ballStyler = styler(ball);
const ballY = value(0, ballStyler.set('y'));
const BOTTOM = 50;

const pipedPhysics = physics({
  acceleration: 2000,
  // friction: 0.5,
  // restSpeed: 0,
  // springStrength: 300,
  // to: 50
}).pipe(clamp(0, BOTTOM));

const anim = pipedPhysics.start(ballY);

ballY.subscribe(v => {
  if (v >= BOTTOM) {
    anim.setVelocity(-ballY.getVelocity());
  };
  // console.log('v, vel: ', v, ballY.getVelocity());    
});

#ball {
  background: #ff2420;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: 0px;
  transform-origin: 50%;
}

<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<div id="ball"></div>

@kojow7 If you run it several times, the results are inconsistent. Sometimes it abruptly stops after just one bounce. I do not think this is the way the Popmotion guys meant for this (probably common) issue to be solved. — Magnus, Feb 26 '19 at 15:09
I am not familiar with Popmotion, but each time I run the above code it works exactly the same way. Is your code snippet above working differently every time you run it on your machine? Is it possible that you have other things going on such as console.log events or something else running concurrently that is slowing down your animation? — kojow7, Feb 26 '19 at 15:22
@kojow7 In the latest version of Chrome the animation varies, but in Firefox (I just tested it) it seems consistent. I have to figure out how the solution actually works though, in order to understand why it acts the way it does. — Magnus, Feb 26 '19 at 15:26

Popmotion: Bounce Effect

0 Answers0