Skip to content

react-voodoo/tween-axis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tween-axis

Fast, additive, reversible, delta based, tween composition engine


Npm version

Description

Classic Tween engines can only output absolute values, which quickly results in very complex code when we have to gradually compose values from multiple sources (e.g. when merging multiple animations based on user drag interactions ) .

Tween Axis is a delta-based interpolation engine that solves this problem, it allows:

  • To apply forward and backward multiples tween values on same properties and multiple objects
  • To do additive tweening
  • Pre-generating frames of properties ( CSS, SVG properties, etc... )
  • Get the delta of multiples values basing a timeline position
  • Etc...

You... like it / it saved your day / you stole all the code / you want more?

contributions welcome

BTC : bc1qh43j8jh6dr8v3f675jwqq3nqymtsj8pyq0kh5a
Paypal : PayPal donate button

Really basic example :

import TweenAxis from "tween-axis";

// // Add the easing function if you want them :
// import * as D3Ease from "d3-ease";
// TweenAxis.EasingFunctions = D3Ease;

let axis    = new TweenAxis(
	    [
		    {
			    from    : 0,
			    duration: 100,
			    // easeFn  : "easePolyOut", // any fn of fn id from TweenAxis.EasingFunctions ( https://github.com/d3/d3-ease format )
			    target: "myTargetId",
			    apply : {
				    value: 200
			    }
		    },
		    {
			    from    : 0,
			    duration: 100,
			    // easeFn  : "easePolyIn", // any fn of fn id from TweenAxis.EasingFunctions ( https://github.com/d3/d3-ease format )
			    target: "myTargetId",
			    apply : {
				    value: -100
			    }
		    }
	    ]
    ),
    context = {
	    myTargetId: {
		    value: 0
	    }
    };

// Use the goTo method to set position basing real axis position
console.log(axis.goTo(50, context));
// { myTargetId: { value: 50 } }
console.log(axis.goTo(25, context));
// { myTargetId: { value: 25 } }
console.log(axis.goTo(75, context));
// { myTargetId: { value: 75 } }

// use the (axis).go method to set position using position/(axis total duration) value
console.log(axis.go(.5, context));
//{ myTargetId: { value: 50 } }
console.log(axis.go(.25, context));
//{ myTargetId: { value: 25 } }
console.log(axis.go(.75, context));
//{ myTargetId: { value: 75 } }

How to add custom tasks / lines

See the SVG Path sample here