Fixed flippable scaling problem.

css/flipeffect.css

@@ -47,7 +47,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     top: 0;
 }
@@ -58,7 +57,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     bottom: 0;
 }
@@ -69,7 +67,6 @@
     width: 44px;
     height: 44px;
     padding: 4px;
-    border: 1px solid red;
     right: 0;
     bottom: 0;
 }

dist/iwmlib.js

@@ -5504,6 +5504,7 @@
                 x: x,
                 y: y,
                 onComplete: (e) => {
+                    console.log('onComplete', e);
                     if (this.flipped) {
                         this.hide(this.front);
                         // this.hide(this.infoBtn)
@@ -5517,17 +5518,24 @@
             //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;
+                // Assumes that startWidth and startHeight are encoded in px
-                let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
+                let sh = parseInt(this.startHeight);
-                let ratio = this.scatterStartWidth / this.scatterStartHeight;
+                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,
+                        transformOrigin: '0% 0%',
-                        scaleX: scaleX * targetScale,
+                        scaleY,
-                        onComplete: (e) => {
+                        scaleX
-                            TweenLite.set(frontImage, { scale: 1.0 });
+                    });
-                        }
+                } else {
+                    TweenLite.to(frontImage, duration, {
+                        ease: Power1.easeOut,
+                        transformOrigin: '0% 0%',
+                        scaleY: 1.0,
+                        scaleX: 1.0
                     });
                 }
             }

dist/iwmlib.pixi.js

@@ -8745,6 +8745,7 @@
                 x: x,
                 y: y,
                 onComplete: (e) => {
+                    console.log('onComplete', e);
                     if (this.flipped) {
                         this.hide(this.front);
                         // this.hide(this.infoBtn)
@@ -8758,17 +8759,24 @@
             //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;
+                // Assumes that startWidth and startHeight are encoded in px
-                let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
+                let sh = parseInt(this.startHeight);
-                let ratio = this.scatterStartWidth / this.scatterStartHeight;
+                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,
+                        transformOrigin: '0% 0%',
-                        scaleX: scaleX * targetScale,
+                        scaleY,
-                        onComplete: (e) => {
+                        scaleX
-                            TweenLite.set(frontImage, { scale: 1.0 });
+                    });
-                        }
+                } else {
+                    TweenLite.to(frontImage, duration, {
+                        ease: Power1.easeOut,
+                        transformOrigin: '0% 0%',
+                        scaleY: 1.0,
+                        scaleX: 1.0
                     });
                 }
             }

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
+            // Assumes that startWidth and startHeight are encoded in px
-            let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h
+            let sh = parseInt(this.startHeight)
-            let ratio = this.scatterStartWidth / this.scatterStartHeight
+            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,
+                    transformOrigin: '0% 0%',
-                    scaleX: scaleX * targetScale,
+                    scaleY,
-                    onComplete: (e) => {
+                    scaleX
-                        TweenLite.set(frontImage, { scale: 1.0 })
+                })
-                    }
+            } else {
+                TweenLite.to(frontImage, duration, {
+                    ease: Power1.easeOut,
+                    transformOrigin: '0% 0%',
+                    scaleY: 1.0,
+                    scaleX: 1.0
                 })
             }
         }