gistfile1.js

var Rich = SC.Object.create();

Rich.animation = SC.Object.create({
	startValue: 0,
	endValue: 0,
	value: 0,
	progress: 0,
	period: 1,
	framesPerSecond: 60,
	transformationType: "sinusoidal",
	
	transformedProgress: function(progress)
	{
		if(this.get("transformationType") == "sinusoidal")
		{
			return (Math.sin(Math.PI * ((1 - progress) + .5)) + 1) / 2;
		}
		else
		{
			return progress;
		}
	},
	
	start: function()
	{
		this.set("value", this.get("startValue"));
		
		this._timer = SC.Timer.schedule({
	      target: this,
	      action: '_updateProgress',
	      interval: 1000 / this.get("framesPerSecond"),
	      repeats: YES,
	      until: (new Date).getTime() + this.get("period") * 1000
	    });
	},

	_updateProgress: function(timer)
	{
		var rawProgress = Math.min(1, ((new Date).getTime() - this._timer.get("startTime")) / this.get("period") / 1000);
		this.set("progress", this.transformedProgress(rawProgress));
		this.set("value", this.get("startValue") + (this.get("endValue") - this.get("startValue")) * this.get("progress"));
	}
});

Rich.mainPage = SC.Page.design({
	layout: { left: 0, right: 0, top: 0, bottom: 0 },
	
	mainPane: SC.MainPane.design(
	{
		childViews: "box".w(),
		box: SC.View.design(
		{
			layout: { left: 0, top: 0, width: 100, height: 100 },
			maxLeft: function()
			{
				return this.getPath("layout.left") - this.getPath("layout.width");
			},
			classNames: "box".w()
		})
	})
});

Rich.main = function() {
	var mainPane = this.getPath("mainPage.mainPane");
	mainPane.bind("layout.left", "Rich.animation.value");
	mainPane.append();
	
	var box = mainPane.get("box");
	
	var animation = this.get("animation");
	animation.bind("endValue", "mainPage.mainPane.box.maxLeft");
	animation.start();
};

function main() { return Rich.main(); }