string-tween
Generate strings between two endpoint strings. Mostly used for animation.
Installation
With your favourite package manager:
- packin:
packin add jkroso/string-tween
- component:
component install jkroso/string-tween
- npm:
npm install string-tween
then in your app:
var tween =
API
tween(a, b)
Create a tween generator from a
to b
var frame =
frame(n)
Create a value n
percent of the distance from a
to b
// => 'rgb(0,0,0)' // => 'rgb(20,20,20)' // => 'rgb(100,100,100)' // => 'rgb(120,120,120)'
Examples
Its pretty amazing how much this buys you when animating DOM properties:
transform
5 // => 'rotate(45deg) scale(1.5) translateX(5px)'
color
5 // => 'rgb(127.5,127.5,0)'
border-radius
5 // => '0 5px 0 1.5px'
path data
5 // => 'M0 0 20 10'
Its so simple its obviously going to have its limitations but still a good place to start.
Running the tests
Just run make
and navigate your browser to the test directory