From 138717e59fa484a9659577d9d72b758b1b365679 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@heroku.com>
Date: Fri, 12 Apr 2019 10:10:24 -0400
Subject: [PATCH 1/5] wip

---
 src/Flipped.vue | 24 +++++++++++++++++++++---
 src/Flipper.vue | 26 ++++++++++++++++++--------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/Flipped.vue b/src/Flipped.vue
index eb89461..bfeeb4c 100644
--- a/src/Flipped.vue
+++ b/src/Flipped.vue
@@ -7,7 +7,19 @@ export default {
     inverseFlipId: String,
     stagger: String,
     shouldFlip: Function,
-    shouldInvert: Function
+    shouldInvert: Function,
+    scale: {
+      type: Boolean,
+      default: false
+    },
+    opacity: {
+      type: Boolean,
+      default: false
+    },
+    translate: {
+      type: Boolean,
+      default: false
+    }
   },
   mounted() {
     if (this.flipId) {
@@ -18,12 +30,18 @@ export default {
         shouldInvert: this.shouldInvert,
         onStart: el => this.$emit("on-start", { el, id: this.flipId }),
         onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
-        stagger: this.stagger
+        stagger: this.stagger,
+        opacity: this.opacity,
+        scale: this.scale,
+        translate: this.translate
       });
     } else if (this.inverseFlipId) {
       this.addInvertedElement({
         element: this.$el,
-        parent: this.$parent.$el
+        parent: this.$parent.$el,
+        opacity: this.opacity,
+        scale: this.scale,
+        translate: this.translate
       });
     }
   },
diff --git a/src/Flipper.vue b/src/Flipper.vue
index c7fcb37..83e2c77 100644
--- a/src/Flipper.vue
+++ b/src/Flipper.vue
@@ -16,12 +16,13 @@ export default {
   },
   props: {
     className: String,
+    decisionData: null,
+    flipKey: [String, Number, Boolean],
+    staggerConfig: Object,
     spring: {
-      type: String,
+      type: [String, Object],
       default: "noWobble"
-    },
-    flipKey: String,
-    staggerConfig: Object
+    }
   },
   data() {
     return {
@@ -37,7 +38,10 @@ export default {
       shouldFlip,
       shouldInvert,
       onStart,
-      onComplete
+      onComplete,
+      opacity,
+      scale,
+      translate
     }) {
       this.flipInstance.addFlipped({
         element,
@@ -46,14 +50,20 @@ export default {
         ...(shouldFlip ? { shouldFlip } : undefined),
         ...(shouldInvert ? { shouldInvert } : undefined),
         ...(onStart ? { onStart } : undefined),
-        ...(onComplete ? { onComplete } : undefined)
+        ...(onComplete ? { onComplete } : undefined),
+        opacity,
+        scale,
+        translate
       });
     },
-    addInvertedElement({ element, parent }) {
+    addInvertedElement({ element, parent, opacity, scale, translate }) {
       this.$nextTick(() => {
         this.flipInstance.addInverted({
           element,
-          parent
+          parent,
+          opacity,
+          scale,
+          translate
         });
       });
     }

From 3be0a9122780fe59b026dfbedf0ee29966992181 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@heroku.com>
Date: Fri, 12 Apr 2019 23:12:43 -0400
Subject: [PATCH 2/5] Add scale example with inversion

---
 stories/Scale.vue        | 130 +++++++++++++++++++++++++++++++++++++++
 stories/index.stories.js |   9 +++
 2 files changed, 139 insertions(+)
 create mode 100644 stories/Scale.vue

diff --git a/stories/Scale.vue b/stories/Scale.vue
new file mode 100644
index 0000000..6887f15
--- /dev/null
+++ b/stories/Scale.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <Flipper :flipKey="focused">
+      <div class="flex items-center h-screen justify-center" v-if="focused === null">
+        <div v-for="color in colors" :key="color">
+          <Flipped :flipId="color" translate scale>
+            <div
+              class="mx-3"
+              @click="setFocused(color)"
+              role="button"
+              :style="{backgroundColor: color}"
+            >
+              <Flipped :inverseFlipId="color">
+                <div class="square font-mono text-xs flex items-center justify-center text-white">
+                  <Flipped :flipId="`hex-${color}`">
+                    <span>{{ color }}</span>
+                  </Flipped>
+                </div>
+              </Flipped>
+            </div>
+          </Flipped>
+        </div>
+      </div>
+      <Flipped :flipId="focused" v-else @on-start="handleStart">
+        <div
+          @click="setFocused(focused)"
+          class="full-screen-square flex flex-col"
+          :style="{backgroundColor: focused}"
+        >
+          <Flipped :inverseFlipId="focused">
+            <div class="flex-auto">
+              <div class="font-mono text-xs text-white p-4 text-center font-bold">
+                <Flipped :flipId="`hex-${focused}`">
+                  <span>{{ focused }}</span>
+                </Flipped>
+              </div>
+              <div class="opacity-grid flex-auto h-full">
+                <div
+                  :style="{backgroundColor: `rgba(0, 0, 0, ${index/40})`}"
+                  class="opacity-grid-square p-4"
+                  v-for="(num, index) in Array(16)"
+                  :key="num"
+                ></div>
+              </div>
+            </div>
+          </Flipped>
+        </div>
+      </Flipped>
+    </Flipper>
+  </div>
+</template>
+
+<script>
+import Flipper from "../src/Flipper";
+import Flipped from "../src/Flipped";
+import anime from "animejs";
+
+export default {
+  name: "scale",
+  components: {
+    Flipper,
+    Flipped
+  },
+  data() {
+    return {
+      focused: null,
+      colors: ["#ff4f66", "#7971ea", "#5900d8"]
+    };
+  },
+  methods: {
+    setFocused(index) {
+      if (index === this.focused) {
+        this.focused = null;
+      } else {
+        this.focused = index;
+      }
+    },
+    handleStart({ el, id }) {
+      const squares = el.querySelectorAll(".opacity-grid-square");
+      anime({
+        targets: squares,
+        opacity: [0, 1],
+        delay: anime.stagger(40, { easing: "easeINQuad" })
+      });
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+.square {
+  height: 100px;
+  width: 100px;
+}
+
+.wrap {
+  transition: background 0.2s ease-out;
+}
+
+.wrap.open {
+  background: rgba(0, 0, 0, 1);
+}
+
+.full-screen-square {
+  width: 600px;
+  height: 600px;
+  position: fixed;
+  margin: auto;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+}
+
+.opacity-grid {
+  height: 555px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, calc(555px / 4));
+  grid-auto-flow: row;
+}
+
+.opacity-grid-square {
+  opacity: 0;
+}
+</style>
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 5e62020..c4044c2 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -7,6 +7,7 @@ import Simple from "./Simple.vue";
 import Double from "./Double.vue";
 import List from "./List.vue";
 import Accordion from "./Accordion.vue";
+import Scale from "./Scale.vue";
 
 import IconsHome from "./IconsHome.vue";
 import IconsDetail from "./IconsDetail.vue";
@@ -55,6 +56,14 @@ storiesOf("Examples", module)
       template: `<List></List>`
     };
   })
+  .add("Scale", () => {
+    return {
+      components: {
+        Scale
+      },
+      template: `<Scale></Scale>`
+    };
+  })
   .add("Accordion", () => {
     return {
       components: {

From eaf0d9d7f57431bc4bc8255c5c1949c5f97461fb Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@heroku.com>
Date: Fri, 12 Apr 2019 23:13:39 -0400
Subject: [PATCH 3/5] Remove decisionData prop

---
 src/Flipper.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Flipper.vue b/src/Flipper.vue
index 83e2c77..e9174df 100644
--- a/src/Flipper.vue
+++ b/src/Flipper.vue
@@ -16,7 +16,6 @@ export default {
   },
   props: {
     className: String,
-    decisionData: null,
     flipKey: [String, Number, Boolean],
     staggerConfig: Object,
     spring: {

From 65f1e3beced7c36ce3b4f8df496d9724b011d026 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@heroku.com>
Date: Fri, 12 Apr 2019 23:14:11 -0400
Subject: [PATCH 4/5] build

---
 dist/vue-flip-toolkit.esm.js | 49 ++++++++++++++++++++++++++++--------
 dist/vue-flip-toolkit.min.js | 49 ++++++++++++++++++++++++++++--------
 dist/vue-flip-toolkit.umd.js | 49 ++++++++++++++++++++++++++++--------
 3 files changed, 114 insertions(+), 33 deletions(-)

diff --git a/dist/vue-flip-toolkit.esm.js b/dist/vue-flip-toolkit.esm.js
index bc7648c..43191c5 100644
--- a/dist/vue-flip-toolkit.esm.js
+++ b/dist/vue-flip-toolkit.esm.js
@@ -6,7 +6,19 @@ var script = {
     inverseFlipId: String,
     stagger: String,
     shouldFlip: Function,
-    shouldInvert: Function
+    shouldInvert: Function,
+    scale: {
+      type: Boolean,
+      default: false
+    },
+    opacity: {
+      type: Boolean,
+      default: false
+    },
+    translate: {
+      type: Boolean,
+      default: false
+    }
   },
   mounted() {
     if (this.flipId) {
@@ -17,12 +29,18 @@ var script = {
         shouldInvert: this.shouldInvert,
         onStart: el => this.$emit("on-start", { el, id: this.flipId }),
         onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
-        stagger: this.stagger
+        stagger: this.stagger,
+        opacity: this.opacity,
+        scale: this.scale,
+        translate: this.translate
       });
     } else if (this.inverseFlipId) {
       this.addInvertedElement({
         element: this.$el,
-        parent: this.$parent.$el
+        parent: this.$parent.$el,
+        opacity: this.opacity,
+        scale: this.scale,
+        translate: this.translate
       });
     }
   },
@@ -1967,12 +1985,12 @@ var script$1 = {
   },
   props: {
     className: String,
+    flipKey: [String, Number, Boolean],
+    staggerConfig: Object,
     spring: {
-      type: String,
+      type: [String, Object],
       default: "noWobble"
-    },
-    flipKey: String,
-    staggerConfig: Object
+    }
   },
   data() {
     return {
@@ -1988,7 +2006,10 @@ var script$1 = {
       shouldFlip,
       shouldInvert,
       onStart,
-      onComplete
+      onComplete,
+      opacity,
+      scale,
+      translate
     }) {
       this.flipInstance.addFlipped({
         element,
@@ -1997,14 +2018,20 @@ var script$1 = {
         ...(shouldFlip ? { shouldFlip } : undefined),
         ...(shouldInvert ? { shouldInvert } : undefined),
         ...(onStart ? { onStart } : undefined),
-        ...(onComplete ? { onComplete } : undefined)
+        ...(onComplete ? { onComplete } : undefined),
+        opacity,
+        scale,
+        translate
       });
     },
-    addInvertedElement({ element, parent }) {
+    addInvertedElement({ element, parent, opacity, scale, translate }) {
       this.$nextTick(() => {
         this.flipInstance.addInverted({
           element,
-          parent
+          parent,
+          opacity,
+          scale,
+          translate
         });
       });
     }
diff --git a/dist/vue-flip-toolkit.min.js b/dist/vue-flip-toolkit.min.js
index bad5947..c724d0a 100644
--- a/dist/vue-flip-toolkit.min.js
+++ b/dist/vue-flip-toolkit.min.js
@@ -9,7 +9,19 @@ var VueFlipToolkit = (function (exports) {
       inverseFlipId: String,
       stagger: String,
       shouldFlip: Function,
-      shouldInvert: Function
+      shouldInvert: Function,
+      scale: {
+        type: Boolean,
+        default: false
+      },
+      opacity: {
+        type: Boolean,
+        default: false
+      },
+      translate: {
+        type: Boolean,
+        default: false
+      }
     },
     mounted() {
       if (this.flipId) {
@@ -20,12 +32,18 @@ var VueFlipToolkit = (function (exports) {
           shouldInvert: this.shouldInvert,
           onStart: el => this.$emit("on-start", { el, id: this.flipId }),
           onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
-          stagger: this.stagger
+          stagger: this.stagger,
+          opacity: this.opacity,
+          scale: this.scale,
+          translate: this.translate
         });
       } else if (this.inverseFlipId) {
         this.addInvertedElement({
           element: this.$el,
-          parent: this.$parent.$el
+          parent: this.$parent.$el,
+          opacity: this.opacity,
+          scale: this.scale,
+          translate: this.translate
         });
       }
     },
@@ -1970,12 +1988,12 @@ var VueFlipToolkit = (function (exports) {
     },
     props: {
       className: String,
+      flipKey: [String, Number, Boolean],
+      staggerConfig: Object,
       spring: {
-        type: String,
+        type: [String, Object],
         default: "noWobble"
-      },
-      flipKey: String,
-      staggerConfig: Object
+      }
     },
     data() {
       return {
@@ -1991,7 +2009,10 @@ var VueFlipToolkit = (function (exports) {
         shouldFlip,
         shouldInvert,
         onStart,
-        onComplete
+        onComplete,
+        opacity,
+        scale,
+        translate
       }) {
         this.flipInstance.addFlipped({
           element,
@@ -2000,14 +2021,20 @@ var VueFlipToolkit = (function (exports) {
           ...(shouldFlip ? { shouldFlip } : undefined),
           ...(shouldInvert ? { shouldInvert } : undefined),
           ...(onStart ? { onStart } : undefined),
-          ...(onComplete ? { onComplete } : undefined)
+          ...(onComplete ? { onComplete } : undefined),
+          opacity,
+          scale,
+          translate
         });
       },
-      addInvertedElement({ element, parent }) {
+      addInvertedElement({ element, parent, opacity, scale, translate }) {
         this.$nextTick(() => {
           this.flipInstance.addInverted({
             element,
-            parent
+            parent,
+            opacity,
+            scale,
+            translate
           });
         });
       }
diff --git a/dist/vue-flip-toolkit.umd.js b/dist/vue-flip-toolkit.umd.js
index 3806604..3c93c66 100644
--- a/dist/vue-flip-toolkit.umd.js
+++ b/dist/vue-flip-toolkit.umd.js
@@ -12,7 +12,19 @@
       inverseFlipId: String,
       stagger: String,
       shouldFlip: Function,
-      shouldInvert: Function
+      shouldInvert: Function,
+      scale: {
+        type: Boolean,
+        default: false
+      },
+      opacity: {
+        type: Boolean,
+        default: false
+      },
+      translate: {
+        type: Boolean,
+        default: false
+      }
     },
     mounted() {
       if (this.flipId) {
@@ -23,12 +35,18 @@
           shouldInvert: this.shouldInvert,
           onStart: el => this.$emit("on-start", { el, id: this.flipId }),
           onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
-          stagger: this.stagger
+          stagger: this.stagger,
+          opacity: this.opacity,
+          scale: this.scale,
+          translate: this.translate
         });
       } else if (this.inverseFlipId) {
         this.addInvertedElement({
           element: this.$el,
-          parent: this.$parent.$el
+          parent: this.$parent.$el,
+          opacity: this.opacity,
+          scale: this.scale,
+          translate: this.translate
         });
       }
     },
@@ -1973,12 +1991,12 @@
     },
     props: {
       className: String,
+      flipKey: [String, Number, Boolean],
+      staggerConfig: Object,
       spring: {
-        type: String,
+        type: [String, Object],
         default: "noWobble"
-      },
-      flipKey: String,
-      staggerConfig: Object
+      }
     },
     data() {
       return {
@@ -1994,7 +2012,10 @@
         shouldFlip,
         shouldInvert,
         onStart,
-        onComplete
+        onComplete,
+        opacity,
+        scale,
+        translate
       }) {
         this.flipInstance.addFlipped({
           element,
@@ -2003,14 +2024,20 @@
           ...(shouldFlip ? { shouldFlip } : undefined),
           ...(shouldInvert ? { shouldInvert } : undefined),
           ...(onStart ? { onStart } : undefined),
-          ...(onComplete ? { onComplete } : undefined)
+          ...(onComplete ? { onComplete } : undefined),
+          opacity,
+          scale,
+          translate
         });
       },
-      addInvertedElement({ element, parent }) {
+      addInvertedElement({ element, parent, opacity, scale, translate }) {
         this.$nextTick(() => {
           this.flipInstance.addInverted({
             element,
-            parent
+            parent,
+            opacity,
+            scale,
+            translate
           });
         });
       }

From 0b0406046a2de4c4e42fb082df373a65f0ea78c9 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@heroku.com>
Date: Fri, 12 Apr 2019 23:17:48 -0400
Subject: [PATCH 5/5] Update README

---
 README.md | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 134d834..76903b8 100644
--- a/README.md
+++ b/README.md
@@ -28,12 +28,12 @@ This library strives to imitate its parent, `react-flip-toolkit`, as closely as
 
 **Props**
 
-| prop                     | default      | type     | details                                                                                                           |
-| ------------------------ | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------- |
-| `className`              | –            | `string` | A class that will apply to the div rendered by `Flipper`                                                          |
-| `flipKey` **(required)** | –            | `string` | Changing this tells `vue-flip-toolkit` to transition child elements wrapped in Flipped components.                |
-| `spring`                 | `"noWobble"` | `string` | Provide a string referencing one of the spring presets — `noWobble`, `veryGentle`, `gentle`, `wobbly`, or `stiff` |
-| `staggerConfig`          | `{}`         | `object` | Provide configuration for staggered Flipped children.                                                             |
+| prop                     | default      | type                      | details                                                                                                                                                                                                   |
+| ------------------------ | ------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`              | –            | `string`                  | A class that will apply to the div rendered by `Flipper`                                                                                                                                                  |
+| `flipKey` **(required)** | –            | `string, number, boolean` | Changing this tells `vue-flip-toolkit` to transition child elements wrapped in Flipped components.                                                                                                        |
+| `spring`                 | `"noWobble"` | `string, object`          | Provide a string or referencing one of the spring presets — `noWobble`, `veryGentle`, `gentle`, `wobbly`, or `stiff`. Otherwise, pass a [custom spring object](https://codepen.io/aholachek/full/bKmZbV/) |
+| `staggerConfig`          | `{}`         | `object`                  | Provide configuration for staggered Flipped children.                                                                                                                                                     |
 
 ### Flipped.vue
 
@@ -48,6 +48,9 @@ This library strives to imitate its parent, `react-flip-toolkit`, as closely as
 | `stagger`               | –       | `string`   | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key.                                                                                     |
 | `shouldInvert`          | –       | `function` | A function provided with the current and previous `decisionData` props passed down by the Flipper component. Returns a boolean indicating whether to apply inverted transforms to all `Flipped` children that request it via an `inverseFlipId`.                                                                                                                |
 | `shouldFlip`            | –       | `function` | A function provided with the current and previous decisionData props passed down by the `Flipper` component. Returns a `boolean` to indicate whether a `Flipped` component should animate at that particular moment or not.                                                                                                                                     |
+| `opacity`               | false   | `boolean`  |                                                                                                                                                                                                                                                                                                                                                                 |
+| `scale`                 | false   | `boolean`  | Tween `scaleX` and `scaleY`                                                                                                                                                                                                                                                                                                                                     |
+| `translate`             | false   | `boolean`  | Tween `translateX` and `translateY`                                                                                                                                                                                                                                                                                                                             |
 
 **Events**