Function interpolate

  • Compute the midpoint of two Objects. This method effectively calculates a specific frame of animation that tween does many times over the course of a full tween.

    import { interpolate } from 'shifty';

    const interpolatedValues = interpolate({
    width: '100px',
    opacity: 0,
    color: '#fff'
    }, {
    width: '200px',
    opacity: 1,
    color: '#000'

    console.log(interpolatedValues); // Logs: {opacity: 0.5, width: "150px", color: "rgb(127,127,127)"}

    Type Parameters


    • from: T

      The starting values to tween from.

    • to: T

      The ending values to tween to.

    • position: number

      The normalized position value (between 0.0 and 1.0) to interpolate the values between from and to for. from represents 0 and to represents 1.

    • easing: Easing = Tweenable.easing.linear

      The easing curve(s) to calculate the midpoint against. You can reference any easing function attached to easing, or provide the EasingFunction(s) directly.

    • delay: number = 0

      Optional delay to pad the beginning of the interpolated tween with. This increases the range of position from (0 through 1) to (0 through 1 + delay). So, a delay of 0.5 would increase all valid values of position to numbers between 0 and 1.5.

    Returns T

Generated using TypeDoc