Merge pull request #1 from JoshuaAmaju/feature/css-props-as-array

README.md

@@ -1 +1,85 @@
-# shared-element
+# Shared Element
+
+Create smooth transition between individual DOM elements.
+[Demo](https://joshuaamaju.github.io/shared-element/index.html)
+
+## Installation
+
+```html
+<script src="https://unpkg.com/shared-element@1.0.0/dist/shared-element.umd.js"></script>
+```
+
+### OR
+
+```bash
+yarn add shared-element
+
+or
+
+npm install shared-element
+```
+
+## Usage
+
+```javascript
+let transition = new SharedElement({ from, to });
+transition.init(object);
+transition.reverse();
+```
+
+## Config
+
+### Methods
+
+- play
+- reverse
+- [css](#css)
+- [init](#init)
+- [points](#points)
+
+#### Init
+
+---
+
+Properties - type: Object
+
+| Key           | Default        | Type      |
+| ------------- | -------------- | --------- |
+| `duration`    | 300            | `number`  |
+| `easing`      | easeInOutQuint | `string`  |
+| `withOverlay` | true           | `boolean` |
+| `delay`       | 0              | `number`  |
+
+#### CSS
+
+---
+
+format: {property: [from, to]}
+
+example
+
+```javascript
+transition.css({
+  borderRadius: ["2em", 0],
+  background: ["red", "blue"]
+});
+```
+
+#### Points
+
+---
+
+example
+
+```javascript
+transition.points({
+  from: {
+    top: 100,
+    left: 400
+  },
+  to: {
+    top: 10,
+    left: 0
+  }
+});
+```

dist/shared-element.esm.js

@@ -69,7 +69,7 @@ function SharedElement({ to, from }) {
   var hasPlayed = false;
   var withOverlay = true;
   var parent = _to.parentNode;
-  var easing = "cubic-bezier(0.65, 0.05, 0.36, 1)";
+  var easing = "cubic-bezier(0.86, 0, 0.07, 1)";
 
   return {
     css: function(_css) {

dist/shared-element.umd.js

@@ -75,7 +75,7 @@
     var hasPlayed = false;
     var withOverlay = true;
     var parent = _to.parentNode;
-    var easing = "cubic-bezier(0.65, 0.05, 0.36, 1)";
+    var easing = "cubic-bezier(0.86, 0, 0.07, 1)";
 
     return {
       css: function(_css) {

docs/index.html

@@ -32,7 +32,8 @@ <h3></h3>
       </div>
     </div>
 
-    <script src="../dist/shared-element.umd.js"></script>
+    <!-- <script src="../dist/shared-element.umd.js"></script> -->
+    <script src="https://unpkg.com/shared-element@1.0.0/dist/shared-element.umd.js"></script>
     <script src="index.js"></script>
   </body>
 </html>

package.json

@@ -11,6 +11,16 @@
   "files": [
     "dist"
   ],
+  "keywords": [
+    "hero",
+    "morph",
+    "animation",
+    "transition",
+    "shared element",
+    "page transition",
+    "morph transition",
+    "shared element transition"
+  ],
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w"

src/shared-element.js

@@ -21,7 +21,7 @@ function SharedElement({ to, from }) {
   var hasPlayed = false;
   var withOverlay = true;
   var parent = _to.parentNode;
-  var easing = "cubic-bezier(0.65, 0.05, 0.36, 1)";
+  var easing = "cubic-bezier(0.86, 0, 0.07, 1)";
 
   return {
     css: function(_css) {