lerp() V4

Performs a linear interpolation between two values.
The closer the amount is to 1, the closer the result is to the end value.

The utils.lerp() function is frame rate independent.

const lerped = utils.lerp(start, end, amount);

Parameters

Name	Accepts
start	`Number`
end	`Number`
amount	`Number [0-1]`

Returns

Number

utils.lerp(0, 100, 0); // 0
utils.lerp(0, 100, 0.5); // 50
utils.lerp(0, 100, 1); // 100

lerp() code example

import { animate, createTimer, utils } from 'animejs';

const [ $input ] = utils.$('.input');
const [ $lerped ] = utils.$('.lerped');
const [ $lerped15fps ] = utils.$('.lerped-15');

animate($input, {
  rotate: '1000turn',
  modifier: utils.snap(.25),
  duration: 4000000,
  loop: true,
  ease: 'linear',
});

const loop = createTimer({
  onUpdate: clock => {
    const sourceRotate = utils.get($input, 'rotate', false);
    const lerpedRotate = utils.get($lerped, 'rotate', false);
    utils.set($lerped, {
      rotate: utils.lerp(lerpedRotate, sourceRotate, .075) + 'turn'
    });
  }
});

const loop15fps = createTimer({
  frameRate: 15,
  onUpdate: clock => {
    const sourceRotate = utils.get($input, 'rotate', false);
    const lerpedRotate = utils.get($lerped15fps, 'rotate', false);
    utils.set($lerped15fps, {
      rotate: utils.lerp(lerpedRotate, sourceRotate, .0725, clock) + 'turn'
    });
  }
});

<div class="x-large spaced-evenly row">
  <div class="col">
    <div class="clock input"></div>
    <div class="label">input</div>
  </div>
  <div class="col">
    <div class="clock lerped"></div>
    <div class="label">lerped</div>
  </div>
  <div class="col">
    <div class="clock lerped-15"></div>
    <div class="label">lerped 15fps</div>
  </div>
</div>

Previous Next