Input smoothing

You can easily add input smoothing to pointer tracking using some light functional composition.

Drag this ball to see pointer tracking without smoothing:

And now with smoothing applied:

Add smoothing

We can use the smooth transformer to apply smoothing to any numerical value.

smooth works by passing a smoothing amount, in milliseconds. This is the duration over which movement will be averaged. So, high numbers equal greater smoothing.

smooth(200)

Importantly, a new instance of smooth must be created for each value we want to smooth. This is because the returned function refers to an internal average value. If we pass it multiple values from different sources, it can’t work!

Multi-axis smoothing

So, our pointer might originally look like this:

pointer({ x: 0, y: 0 })
  .start(({ x, y }) => /* unsmoothed output */)

To apply smoothing on both x and y, we can use the transformMap transformer along with smooth:

import { pointer, transform } from 'popmotion';
const { transformMap, smooth } = transform;

pointer({ x: 0, y: 0 })
  .pipe(transformMap({
    x: smooth(200),
    y: smooth(200)
  }))
  .start(({ x, y }) => /* smoothed! */)

Single-axis smoothing

If we’re just tracking a single axis, we don’t even need transformMap:

pointer({ x: 0, y: 0 })
  .pipe(
    ({ x }) => x,
    smooth(200)
  ).start((x) => /* smoothed x axis */)

Conclusion

By using smooth, we can apply smoothing to not just pointer output, but that of any action.

More examples of pipe and functional composition can be found in the value pipelines tutorial.