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>