How to use the popmotion.physics function in popmotion

// If out of bounds, snap to the edges.
    if (this.isOffLeft(offset) || this.isOffRight(offset)) {
      this.startAction(
        physics({
          from: this.getOffset(),
          to: this.snapTo(this.getOffset()),
          spring,
          friction,
          velocity: this.currentOffset.getVelocity(),
          onUpdate: pipe(this.setOffset),
        }),
      );
    } else {
      // Otherwise scroll with low friction.
      this.startAction(
        physics({
          from: this.getOffset(),
          friction: scrollFriction,
          velocity: this.currentOffset.getVelocity(),
          onUpdate: pipe(
            conditional(
              x =>
                this.isOffLeft(x) ||
                this.isOffRight(x) ||
                // Only snap with this spring when snap is activated and velocity is slow.
                (this.snap && Math.abs(this.currentOffset.getVelocity() / 2) < spring),
              x =>
                this.startAction(
                  physics({
                    from: this.getOffset(),
                    to: this.snapTo(x),
                    spring,

// Render loop
      const render = () => renderer.render(scene, camera);
      everyFrame().start(render);
      
      // Rotate camera
      tween({
        from: 0,
        to: 360,
        loop: Infinity,
        ease: easing.linear,
        duration: 12000
      }).start(cameraRotation);

      // Bounce ball
      const gravity = physics({
        from: sphereY.get(),
        acceleration: - 9.8,
        restSpeed: false
      }).start((v) => {
        if (v <= 1) {
          v = 1;
          gravity.setVelocity(10);
        }
      
        sphereY.update(v);
      });

      this.sphereY = sphereY;
      this.cameraRotation = cameraRotation;
    });
  }

onEndZoom(e) {
      const velocity = momentumRecognizer.finalize();
      if (velocity != null) {
        physics({
          from: camera.get(),
          velocity: { x: velocity.x, y: velocity.y, zoom: 0 },
          friction: 0.3
        }).start(camera);
      }

      const { onEndZoom } = handlers;
      if (onEndZoom != null) onEndZoom(e);
    }
  });

() => {
      if (clickRecognizer.finalize()) {
        onBackgroundClicked();
      }

      const velocity = momentumPanning.finalize();
      if (velocity != null) {
        physics({
          from: canvasOrigin.get(),
          velocity: { x: velocity.x, y: velocity.y, zoom: 0 },
          friction: 0.3
        }).start(canvasOrigin);
      }
    },
    [canvasOrigin, clickRecognizer, momentumPanning]

goTo(index) {
    const { friction, spring } = this.snapSettings;

    this.startAction(
      physics({
        from: this.getOffset(),
        to: this.snapTo(this.sleepersArray[index]),
        spring,
        friction,
        velocity: this.currentOffset.getVelocity(),
        onUpdate: pipe(this.setOffset),
      }),
    );
  }

if (
        ballY.get() >= 0 &&
        ballY.getVelocity() !== 0 &&
        ball.innerHTML !== 'Tap'
      ) {
        count = 0;
        tween({
          from: { borderWidth: 0, borderColor: 'rgb(255, 28, 104, 1)' },
          to: { borderWidth: 30, borderColor: 'rgb(255, 28, 104, 0)' }
        }).start(ballBorder);

        ball.innerHTML = 'Tap';
      }
    };

    const gravity = physics({
      acceleration: 2500,
      restSpeed: false
    }).start(v => {
      ballY.update(v);
      checkBounce(v);
      checkFail(v);
    });

    listen(ball, 'mousedown touchstart').start(e => {
      e.preventDefault();
      count++;
      ball.innerHTML = count;

      isFalling = true;
      ballScale.stop();
      ballScale.update(1);

x =>
                this.startAction(
                  physics({
                    from: this.getOffset(),
                    to: this.snapTo(x),
                    spring,
                    friction,
                    velocity: this.currentOffset.getVelocity(),
                    onUpdate: pipe(this.setOffset),
                  }),
                ),
            ),

      complete: () => physics({ velocity: -400 }).start(this.circleRotation)
    });

tween({
        to: 15,
        duration: 800,
        ease: easing.easeIn,
        onUpdate: (v) => pathRenderer.set('length', v)
      }),
      parallel([
        tween({
          onUpdate: (v) => {
            pathSvgRenderer.set({
              fillOpacity: v,
              strokeOpacity: 1 - v
            });
          }
        }),
        physics({
          to: 1,
          velocity: 50,
          spring: 300,
          friction: 0.95,
          onUpdate: (v) => containerRenderer.set('scale', v)
        })
      ])
    ]).start();
  }