Fixed flippable scaling problem.

lib/flippable.js

@@ -632,6 +632,7 @@ export class DOMFlippable {
             x: x,
             y: y,
             onComplete: (e) => {
+                console.log('onComplete', e)
                 if (this.flipped) {
                     this.hide(this.front)
                     // this.hide(this.infoBtn)
@@ -645,17 +646,24 @@ export class DOMFlippable {
         //uo: check for special case that the front image must be adapted to the back size
         let frontImage = this.front.querySelector('img')
         if (frontImage) {
-            let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w
-            let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h
-            let ratio = this.scatterStartWidth / this.scatterStartHeight
+            // Assumes that startWidth and startHeight are encoded in px
+            let sh = parseInt(this.startHeight)
+            let sw = parseInt(this.startWidth)
             if (this.flipped) {
+                let scaleY = h / sh
+                let scaleX = w / sw
                 TweenLite.to(frontImage, duration, {
                     ease: Power1.easeOut,
-                    scaleY: scaleY * targetScale * ratio,
-                    scaleX: scaleX * targetScale,
-                    onComplete: (e) => {
-                        TweenLite.set(frontImage, { scale: 1.0 })
-                    }
+                    transformOrigin: '0% 0%',
+                    scaleY,
+                    scaleX
+                })
+            } else {
+                TweenLite.to(frontImage, duration, {
+                    ease: Power1.easeOut,
+                    transformOrigin: '0% 0%',
+                    scaleY: 1.0,
+                    scaleX: 1.0
                 })
             }
         }