String Interpolation

In addition to raw Numbers, Shifty can tween numbers inside of strings. Among other things, this allows you to animate CSS properties. For example, you can do this:

import { tween } from 'shifty'

tween({
  from: { transform: 'translateX(45px)' },
  to: { transform: 'translateX(90px)' },
})

translateX(45) will be tweened to translateX(90). To demonstrate:

See the Pen Shifty - Basic string interpolation demo by Jeremy Kahn (@jeremyckahn) on CodePen.

Another use for this is animating colors:

See the Pen Shifty - Basic string interpolation demo by Jeremy Kahn (@jeremyckahn) on CodePen.

Shifty also supports hexadecimal colors, in both long (#ff00ff) and short (#f0f) forms. Be aware that hexadecimal input values will be converted into the equivalent RGB output values. This is done to optimize for performance.

See the Pen Shifty - Hex color string interpolation demo by Jeremy Kahn (@jeremyckahn) on CodePen.

Easing support

Easing works somewhat differently with string interpolation. This is because some CSS properties have multiple values in them, and you might need to tween each value along its own easing curve.

See the Pen Shifty - String interpolation with single ease demo by Jeremy Kahn (@jeremyckahn) on CodePen.

In this case, the values for translateX and translateY are always the same for each tick of the tween, because they have the same start and end points and both use the same easing curve. We can also tween translateX and translateY along independent curves:

See the Pen Shifty - String interpolation with multiple eases demo by Jeremy Kahn (@jeremyckahn) on CodePen.

translateX and translateY are not in sync anymore, because easeInQuad was specified for translateX and bounce for translateY. Mixing and matching easing curves can make for some interesting motions in your animations!

The order of the space-separated easing curves correspond the number values they apply to. If there are more number values than easing curves listed, the last easing curve listed is used for the remaining numbers.

See the Pen Shifty - Basic CSS animation by Jeremy Kahn (@jeremyckahn) on CodePen.

A note on performance

Shifty's string interpolation is powerful because it is generic and can handle just about any kind of string format. However, that power comes at a performance cost. In many cases this cost is insignificant, but if Shifty is playing many animations simultaneously, you may see some slowdown. If you experience performance issues when animating strings, consider finding a lower level solution that relies solely on raw Numbers. For instance, if your animation looks like this:

const div = document.querySelector('div')

shifty.tween({
  from: { transform: 'translateX(0px) translateY(0px)' },
  to: { transform: 'translateX(100px) translateY(100px)' },
  easing: { transform: 'easeInQuad' },
  render: ({ transform }) => (div.style.transform = transform),
})

You might rewrite it without strings like this for better performance:

const div = document.querySelector('div')

shifty.tween({
  from: { x: 0, y: 0 },
  to: { x: 100, y: 100 },
  easing: { transform: 'easeInQuad' },
  render: ({ x, y }) =>
    (div.style.transform = `translateX(${x}px) translateY(${y}px)`),
})