rytm-webflow 2.0.8 → 2.0.9

package/README.md

@@ -250,7 +250,7 @@ Animate any element within the *WebflowView* container using the **Webflow synta
 ```
 or (more complex example):
 ```html
-<div data-webview-initial="x:-10,y:50" data-webview-show="x:0,y:0,t:.5,d:.15,e:Power2.easeOut" data-webview-hide="x:10,y:-25,t:.4,d:.2,e:Power2.easeIn">
+<div data-webview-initial="x:-10,y:50" data-webview-show="x:0,y:0,t:.5,d:.15,e:power3.out" data-webview-hide="x:10,y:-25,t:.4,d:.2,e:power2.in">
   ...
 </div>
 ```
@@ -300,7 +300,7 @@ To implement ShowUp on your HTML add a `data-webflow` or `data-webpara` attribut
 Add easing for your animations
 ```html
 <!-- gsap easing -->
-<div data-webflow="x:-10vw,t:.5,e:Expo.easeOut">...</div>
+<div data-webflow="x:-10vw,t:.5,e:expo.out">...</div>
 ```
 Delay animations
 ```html
@@ -387,7 +387,7 @@ Examples:
 <h1>Webflow show up</h1>
 <div data-webflow="t:.4,o:0,y:10;t:.4,o:0,y:-30">Webflow Simple ALPHA no delay</div>
 <div data-webflow="t:.4,o:0,s:.4;t:.4,o:0,s:1.5">Webflow Scale</div>
-<div data-webflow="t:1.4,x:-300,e:Expo.easeOut;t:.4,d:0,x:-100,e:Expo.easeIn" data-webset="offset:100">Webflow Offset: 100, Ease EXPO</div>
+<div data-webflow="t:1.4,x:-300,e:expo.out;t:.4,d:0,x:-100,e:expo.in" data-webset="offset:100">Webflow Offset: 100, Ease EXPO</div>
 <div data-webflow="t:1.4,x:-100vw;t:.4,d:0,x:-250" data-webset="offset:center">Webflow Offset: center</div>
 <div data-webflow="t:1.4,x:-250;t:.4,d:0,x:-250" data-webset="offset:top">Webflow offset: TOP</div>
 <div data-webflow="t:1.4,x:-250,w:10;t:.4,d:0,x:-250" data-webset="trigger:#boom">Webflow Triggered by next BLOCK</div>
@@ -395,7 +395,7 @@ Examples:
 <!-- ### Webflow Parallax ### -->
 <h1>Webflow parallax</h1>
 <div data-webpara="x:400" data-webset="duration:100%">Parallax duration 100%</div>
-<div data-webpara="x:400,e:Back.easeOut" data-webset="duration:40vh">Parallax  duration 40vh, ease: Back</div>
+<div data-webpara="x:400,e:back.out" data-webset="duration:40vh">Parallax  duration 40vh, ease: Back</div>
 <div >parent TRIGGER
   <div data-webpara="y:-500,r:180" data-webset="duration:100%,trigger:parent">Parallax Y</div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "scripts": {

package/scripts/lib/dataTweenParser.js

@@ -145,7 +145,10 @@ const translateNonNumericValue = (key, valStr) => {
   let val
   switch (key) {
     case 'ease':
-      val = getWebflowEasing(valStr)
+      // old syntax: 'Back.easeOut'
+      val = getWebflowEasing(valStr);
+      // new syntax, eg.: 'back.out'
+      val = val ? val : valStr;
       break;
     default:
       // by default don't change anything (eg. '100%', '50vw')
@@ -155,6 +158,7 @@ const translateNonNumericValue = (key, valStr) => {
   return val
 }
 /**
+ * ### Depreciated (use string values insted, eg "e:back.out")
  * Get the TweenMax Easing function
  * @param {string} str 
  * @return {Ease}