string-tween

generate strings between two endpoint strings

string-tween

Generate strings between two endpoint strings. Mostly used for animation.

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 = require('string-tween')

Create a tween generator from a to b

var frame = tween('rgb(0,0,0)', 'rgb(100,100,100)')

Create a value n percent of the distance from a to b

frame(0) // => 'rgb(0,0,0)' 
frame(0.2) // => 'rgb(20,20,20)' 
frame(1) // => 'rgb(100,100,100)' 
frame(1.2) // => 'rgb(120,120,120)' 

Its pretty amazing how much this buys you when animating DOM properties:

tween(
  'rotate(0) scale(1) translateX(0)', 
  'rotate(90deg) scale(2) translateX(10px)'
)(.5) // => 'rotate(45deg) scale(1.5) translateX(5px)' 
tween('rgb(255,0,0)', 'rgb(0,255,0)')(.5) // => 'rgb(127.5,127.5,0)' 
tween('0 0 0 0', '0 10px 0 3px')(.5) // => '0 5px 0 1.5px' 
tween('M0 0 20 0', 'M0 0 20 20')(.5) // => 'M0 0 20 10' 

Its so simple its obviously going to have its limitations but still a good place to start.

Just run make and navigate your browser to the test directory