Tweenable.token Module
This module adds string interpolation support to Shifty.
The Token extension allows Shifty to tween numbers inside of strings. Among other things, this allows you to animate CSS properties. For example, you can do this:
var tweenable = new Tweenable();
tweenable.tween({
from: { transform: 'translateX(45px)' },
to: { transform: 'translateX(90xp)' }
});
translateX(45)
will be tweened to translateX(90)
. To demonstrate:
var tweenable = new Tweenable();
tweenable.tween({
from: { transform: 'translateX(45px)' },
to: { transform: 'translateX(90px)' },
step: function (state) {
console.log(state.transform);
}
});
The above snippet will log something like this in the console:
translateX(60.3px)
...
translateX(76.05px)
...
translateX(90px)
Another use for this is animating colors:
var tweenable = new Tweenable();
tweenable.tween({
from: { color: 'rgb(0,255,0)' },
to: { color: 'rgb(255,0,255)' },
step: function (state) {
console.log(state.color);
}
});
The above snippet will log something like this:
rgb(84,170,84)
...
rgb(170,84,170)
...
rgb(255,0,255)
This extension 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.
var tweenable = new Tweenable();
tweenable.tween({
from: { color: '#0f0' },
to: { color: '#f0f' },
step: function (state) {
console.log(state.color);
}
});
This snippet will generate the same output as the one before it because equivalent values were supplied (just in hexadecimal form rather than RGB):
rgb(84,170,84)
...
rgb(170,84,170)
...
rgb(255,0,255)
Easing support
Easing works somewhat differently in the Token extension. This is because some CSS properties have multiple values in them, and you might need to tween each value along its own easing curve. A basic example:
var tweenable = new Tweenable();
tweenable.tween({
from: { transform: 'translateX(0px) translateY(0px)' },
to: { transform: 'translateX(100px) translateY(100px)' },
easing: { transform: 'easeInQuad' },
step: function (state) {
console.log(state.transform);
}
});
The above snippet will create values like this:
translateX(11.56px) translateY(11.56px)
...
translateX(46.24px) translateY(46.24px)
...
translateX(100px) translateY(100px)
In this case, the values for translateX
and translateY
are always the
same for each step 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:
var tweenable = new Tweenable();
tweenable.tween({
from: { transform: 'translateX(0px) translateY(0px)' },
to: { transform: 'translateX(100px) translateY(100px)' },
easing: { transform: 'easeInQuad bounce' },
step: function (state) {
console.log(state.transform);
}
});
The above snippet will create values like this:
translateX(10.89px) translateY(82.35px)
...
translateX(44.89px) translateY(86.73px)
...
translateX(100px) translateY(100px)
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 motion in your
animations.
The order of the space-separated easing curves correspond the token values they apply to. If there are more token values than easing curves listed, the last easing curve listed is used.
This module provides the following classes: