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

API

tween(a, b)

Create a tween generator from a to b

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

frame(n)

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)'

Examples

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

transform

tween(
  'rotate(0) scale(1) translateX(0)', 
  'rotate(90deg) scale(2) translateX(10px)'
)(.5) // => 'rotate(45deg) scale(1.5) translateX(5px)'

color

tween('rgb(255,0,0)', 'rgb(0,255,0)')(.5) // => 'rgb(127.5,127.5,0)'

border-radius

tween('0 0 0 0', '0 10px 0 3px')(.5) // => '0 5px 0 1.5px'

path data

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.

Running the tests

Just run make and navigate your browser to the test directory