diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 137d0cea..ff605ea7 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -47,15 +47,15 @@
 
 /* basic animation... */
 .viewer:not(.no-transitions) .ribbon-set {
-	-webkit-transition: all 0.2s ease, transform 0.2s linear/*, transform-origin 0s none*/;
-	-moz-transition: all 0.2s ease, transform 0.2s linear/*, transform-origin 0s none*/;
-	transition: all 0.2s ease, transform 0.2s linear/*, transform-origin 0s none*/;
+	-webkit-transition: all 0.2s linear, transform 0.2s linear;
+	-moz-transition: all 0.2s linear, transform 0.2s linear;
+	transition: all 0.2s linear, transform 0.2s linear;
 }
 
 .viewer:not(.no-transitions) .ribbon {
-	-webkit-transition: all 0.2s ease;
-	-moz-transition: all 0.2s ease;
-	transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease-out;
+	-moz-transition: all 0.2s ease-out;
+	transition: all 0.2s ease-out;
 }
 
 .no-transitions {
diff --git a/ui (gen4)/lib/jli.js b/ui (gen4)/lib/jli.js
index b1dea7fc..ab814cb3 100755
--- a/ui (gen4)/lib/jli.js	
+++ b/ui (gen4)/lib/jli.js	
@@ -870,6 +870,7 @@ function stopAnimation(elem){
 
 
 // XXX account for other transitions...
+// XXX make a sync version...
 function setElementOffset(elem, l, t){
 	return setElementTransform(elem, [l, t])
 }
@@ -895,6 +896,34 @@ function setElementOrigin(elem, x, y, z){
 	})
 }
 
+
+// a sync version of setElementOrigin(..), this will not trigger transforms...
+function setElementOriginSync(elem, x, y, z){
+	x = x == null ? '50%' : x
+	y = y == null ? '50%' : y
+	z = z == null ? '0' : z
+	var value = x +' '+ y +' '+ z
+
+	elem = $(elem)
+	var e = elem[0]
+
+	e.style.display = 'none'
+	// now kick the browser into recognition of our changes NOW ;)
+	getComputedStyle(e).display
+
+	e.style['-o-transform-origin'] =  value
+	e.style['-ms-transform-origin'] =  value
+	e.style['-moz-transform-origin'] =  value
+	e.style['-webkit-transform-origin'] =  value
+	e.style['transform-origin'] = value
+
+	e.style.display = ''
+	getComputedStyle(e).display
+
+	return $(elem)
+}
+
+
 // this is like setElementOrigin(..) but will compensate for element 
 // shift when scaled...
 // NOTE: this will work only of translate is used for positioning...
@@ -909,7 +938,7 @@ function shiftOriginTo(elem, l, t){
 
 	setElementOffset(elem, cl, ct)
 
-	return setElementOrigin(elem, l+'px', t+'px')
+	return setElementOriginSync(elem, l+'px', t+'px')
 }
 
 
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 8618b92f..4a3b4af5 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -172,6 +172,7 @@ module.RibbonsPrototype = {
 	// XXX need a better way of doing this...
 	preventTransitions: function(){
 		this.viewer.addClass('no-transitions')
+		getComputedStyle(this.viewer[0]).style
 	},
 	restoreTransitions: function(now){
 		// sync...
@@ -276,7 +277,6 @@ module.RibbonsPrototype = {
 	//
 	// NOTE: this will also compensate for scaling.
 	//
-	// XXX make this work sync without affecting animation...
 	// XXX DEBUG: remove point updating when not needed...
 	setOrigin: function(a, b){
 		//this.preventTransitions()
@@ -299,7 +299,6 @@ module.RibbonsPrototype = {
 			var t = (io.top - ro.top)/s + h/2
 		}
 
-		// XXX when transitions are enabled this will make the view jump...
 		shiftOriginTo(ribbon_set, l, t)
 
 		// XXX DEBUG: remove when done...
@@ -1343,6 +1342,9 @@ module.RibbonsPrototype = {
 
 	// center a ribbon vertically...
 	// 
+	// XXX offset and scale are not used...
+	// XXX custom align point woud also be nice... 
+	// 		(top, bottom, center, %, px)
 	centerRibbon: function(target, offset, scale){
 		var ribbon_set = this.viewer.find('.ribbon-set')
 
@@ -1368,6 +1370,9 @@ module.RibbonsPrototype = {
 
 	// center an image horizontally...
 	// 
+	// XXX offset is not used...
+	// XXX custom align point woud also be nice... 
+	// 		(top, bottom, center, %, px)
 	centerImage: function(target, mode, offset, scale){
 		target = this.getImage(target)
 		scale = scale || this.getScale()