ART.Fx Demo

ART.Fx.Demo.js

var playhead, art, keyframe1, keyframe2;

addEvent('load', function(){

	art = new ART(400, 400).inject(document.body);

	playhead = new ART.Rectangle(200, 200)
		.inject(art)
		.fill('#00F');

	keyframe1 = playhead.tween(2000) // begin tween
		.scale(2, 1)
		.fill('#0F0');

	keyframe2 = keyframe1.tween(2000) // sequential chaining
		.scale(2, 2)
		.fill('#F00');

	keyframe2.tweenTo(keyframe1, 2000); // loop

});

addEvent('click', function(){

	playhead.tweenTo(playhead); // equivalent to playhead.stop();

});

addEvent('keyup', function(){

	playhead.tweenTo(keyframe2.stop()); // tween to keyframe2, then stop

});


// Keyframes can be thought of as timelines


var playhead, art;

addEvent('load', function(){

	art = new ART(400, 400).inject(document.body);

	playhead = new ART.Rectangle(200, 200)
		.inject(art)
		.fill('#00F');

	var timeline = playhead.tween(2000)
		.scale(2, 1)
		.fill('#0F0');

	timeline.tween(500) // append to the existing timeline
		.scale(2, 2)
		.fill('#F00')

		.tween(1000)
		.scale(1, 1)
		.fill('#00C');
	
	timeline.getLast().tweenTo(timeline.clone().reverse().next); // equivalent to timeline.yoyo();
	
	timeline.repeat(10); // repeat the whole thing 10 times
	
	timeline.setDuration(5000); // uniformly scale the entire animation down to 5 seconds
	
});


addEvent('click', function(){

	if (playhead.paused) playhead.resume() else playhead.pause();

});