Fixed flipeffect bug.

lib/flippable.js

@@ -332,9 +332,13 @@ export class DOMFlip {
     }
 
     start({ targetCenter = null } = {}) {
+        console.log('start')
+        this.flippable.showFront()
         if (this.preloadBack) {
+            console.log('preloadBack')
             this.flippable.start({ duration: this.flipDuration, targetCenter })
         } else {
+            console.log('no back preload')
             let back = this.cardWrapper.querySelector('.back')
             let flippable = this.flippable
             this.backLoader.load(back).then(loader => {
@@ -542,6 +546,7 @@ export class DOMFlippable {
 
     start({ targetCenter = null } = {}) {
         this.bringToFront()
+        console.log('flippable start', this.flipped)
         if (!this.flipped) {
             this.startX = this.element._gsTransform.x
             this.startY = this.element._gsTransform.y

lib/pixi/flipeffect.html

@@ -80,13 +80,13 @@
                 setup() {
                     super.setup()
                     let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
-                    PIXI.Loader.shared.add(urls).load(loader => {
+                    PIXI.Loader.shared.add(urls).load((loader, resources) => {
                         // We need a loader because the size of the sprite must be known
                         // when the scatter is defined
                         let x = 30
                         let y = 30
-                        for (let url in loader.resources) {
-                            let sprite = PIXI.Sprite.from(url)
+                        for (const url of urls) {
+                            const sprite = PIXI.Sprite.from(resources[url].texture)
                             sprite.interactive = true
                             let scatter = new DisplayObjectScatter(sprite, this.renderer, {
                                 x: x,

lib/pixi/flipeffect.js

@@ -43,7 +43,9 @@ export class ScatterLoader extends CardLoader {
         let canvas = globalScatterLoaderCanvas
         canvas.width = w
         canvas.height = h
-        let renderer = new PIXI.Renderer(w, h, {
+        let renderer = new PIXI.Renderer({
+            width: w,
+            height: h,
             view: canvas,
             resolution: resolution
         })
@@ -124,7 +126,6 @@ export default class FlipEffect {
             domFlip.centerAt(center)
             domFlip.zoom(this.scatter.scale)
             let target = this.constraintFlipCenter(center, loader)
-            console.log('FlipEffect.startFlip', target, loader)
             domFlip.start({ targetCenter: target })
         })
     }
@@ -147,7 +148,6 @@ export default class FlipEffect {
     constraintFlipCenter(center, loader) {
         let w = loader.wantedWidth
         let h = loader.wantedHeight
-        console.log('constraintFlipCenter', w, h)
         let canvas = app.renderer.view
         let x = center.x
         let y = center.y