Property Interpolation

Interpolation is used in the process of tweening property values

Just Animate has support for providing custom interpolation per property. This allows us to provide specialized rules for handling properties or plugin an existing library such as Flubber to handle the trickier parts.

Applying a template for HTML

If we wanted to add a special for a innerHTML, we could do the following:

var t1 = just.animate({
    targets: '.timer',
    duration: 1000,
    easing: 'linear',
    props: {
        innerHTML: {
            value: [0, 1000]
            interpolate(left, right) {
                return offset => {
                    return just.interpolate(left, right, offset) + 'ms'
                }
            }
        }
    }
})

In this example, we are tweening from 0 1000 milliseconds and adding the suffix 'ms'. To make things easier, we are using the interpolate helper from Just Animate to calculate the value. The offset is a value between 0 and 1 that represents the progression of the tween between each set of keyframes. Since we only have 2 keyframes (0 and 1000), the offset would be at .5 (50%) progressed at 50% of the total animation. Since we are using a linear easing, that would also match up with the animation time and be at 500ms of the total animation.

ViewBox (SVG)

The viewBox property is an attribute on the SVG element that specifies the width, height, and the position of the upper left hand corner of the SVG. With Just Animate, this property can be used like a camera to zoom and pan an SVG

If we wanted to animate something like the viewBox in SVG, we could write something like this:

var t1 = just.animate({
    targets: 'svg',
    duration: 1000,
    props: {
        viewBox: {
            value: ['0 0 200 200', '0 0 280 280']
            interpolate: interpolateViewBox
        }
    }
})

function interpolateViewBox(left, right) {
   const leftVal = left.split(' ').map(s => +s);
   const rightVal = right.split(' ').map(s => +s);

   return offset => {
      return leftVal
          .map((l, i) => just.interpolate(l, rightVal[i], offset))
          .join(' ');
   };
}

In this example, we are animating the width and height of the viewBox to accommodate a larger svg image. If we wanted to move the "camera" we could simply change the first to 0 to the new x and y coordinates.

One important thing to notice is that the interpolateViewBox function is does parsing before returning the interpolator function. Both the interpolateViewBox function and the interpolator it returns are cached, so it is important that both of these functions are pure, as they will not be called more than once for every combination of parameters (left, right, or offset).