Rounded values

Popmotion’s emphasis on functional composition means actions don’t offer explicit support via properties like rounded: true.

Instead, we can round the output of any action by providing JavaScript’s native Math.round to pipe. For instance:

Round a single value

If we have a tween that outputs a single value, we can round it like this:

tween({ to: 1000 }).pipe(Math.round)

Every animation is an action, so this applies to animations like physics too:

physics({ velocity: 100 }).pipe(Math.round)

Round a complex value

If we’re animating an object, we can apply rounding to specific values using the transformMap transformer:

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

tween({
  to: { x: 100, y: 100 }
}).pipe(transformMap({
  x: Math.round
}));

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