feat: support function in to

README.md

@@ -56,12 +56,12 @@ wait(1000 /* in ms */).then(() => {
 ```
 
 -   `target(s)` - object(s) whose properties you want to animate, target is single object, targets is array of object
--   `to` - properties with final values you want to animate to
+-   `to` - properties with final values you want to animate to. If a function is given, it will be called with index of target to animate (starting from 0) and return value will be used as `to` for that target
 -   `time` - time taken to animate
 -   `type` - type of animation (pre added: \['linear', 'ease', 'easeIn', 'easeOut', 'easeInOut'])
 -   `round` - round off animated values or not
 -   `onUpdate` - this function will be called on update with arguments `object`, `property`, `currentValue`, doing heavy lifting here can cause laggy animation
--   `delay` - (in miliseconds) number or function, delay before start of animation. If a function is given, it will be called with index of target animating (starting from 0) and return value will be used as delay
+-   `delay` - (in miliseconds) number or function, delay before start of animation. If a function is given, it will be called with index of target to animate (starting from 0) and return value will be used as `delay` for that target
 
 If from values are not given (or object doesn't have that property), they will start from 0.
 

showcase/showcases.json

@@ -66,14 +66,21 @@
           "style": "#element > #parent * {\n  padding: 10px;\n  background: white;\n  width: 30px;\n  font-size: 10px;\n  display: inline-block;\n  margin: 30px;\n}",
           "code": "<div id=\"parent\">\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n</div>",
           "elState": "const children = this.$$('div');\n\nSifrr.animate({\n  targets: children,\n  to: {\n    style: {\n      transform: ['scale3d(1,1,1)', 'scale3d(2,2,2)']\n    }\n  },\n  type: 'ease',\n  time: 300,\n  delay: i => {\n    const x_c = Math.abs((i % 5) - 2);\n    const y_c = Math.abs(Math.floor(i / 5) - 2);\n    const max_c = Math.max(x_c, y_c);\n    return max_c * 200\n  }\n});"
+        },
+        {
+          "variantId": 10,
+          "variantName": "to as function",
+          "style": "#element > #parent * {\n  padding: 10px;\n  background: white;\n  width: 30px;\n  height: 100px;\n  font-size: 10px;\n  display: inline-block;\n  margin: 30px;\n}",
+          "code": "<div id=\"parent\">\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n</div>",
+          "elState": "const children = this.$$('div');\n\nSifrr.animate({\n  targets: children,\n  to: (i) => {\n    return {\n      style: {\n        height: ['100px', (110 + i * 10) + 'px']\n      }\n    }\n  },\n  type: 'ease',\n  time: 300,\n  delay: i => i * 50\n});"
         }
       ],
       "element": "sifrr-shimmer",
-      "code": "<div id=\"parent\">\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n<br>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n</div>",
-      "variantId": 9,
-      "variantName": "ripple",
-      "style": "#element > #parent * {\n  padding: 10px;\n  background: white;\n  width: 30px;\n  font-size: 10px;\n  display: inline-block;\n  margin: 30px;\n}",
-      "elState": "const children = this.$$('div');\n\nSifrr.animate({\n  targets: children,\n  to: {\n    style: {\n      transform: ['scale3d(1,1,1)', 'scale3d(2,2,2)']\n    }\n  },\n  type: 'ease',\n  time: 300,\n  delay: i => {\n    const x_c = Math.abs((i % 5) - 2);\n    const y_c = Math.abs(Math.floor(i / 5) - 2);\n    const max_c = Math.max(x_c, y_c);\n    return max_c * 200\n  }\n});"
+      "code": "<div id=\"parent\">\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n  <div>0</div>\n</div>",
+      "variantId": 10,
+      "variantName": "to as function",
+      "style": "#element > #parent * {\n  padding: 10px;\n  background: white;\n  width: 30px;\n  height: 100px;\n  font-size: 10px;\n  display: inline-block;\n  margin: 30px;\n}",
+      "elState": "const children = this.$$('div');\n\nSifrr.animate({\n  targets: children,\n  to: (i) => {\n    return {\n      style: {\n        height: ['100px', (110 + i * 10) + 'px']\n      }\n    }\n  },\n  type: 'ease',\n  time: 300,\n  delay: i => i * 50\n});"
     },
     {
       "name": "codepen examples",

src/animate.js

@@ -37,7 +37,12 @@ function animate({
     }
     return Promise.all(promises);
   }
-  return Promise.all(targets.map((target, i) => iterate(target, to, i)));
+  let numTo;
+  return Promise.all(targets.map((target, i) => {
+    numTo = to;
+    if (typeof to === 'function') numTo = to(i);
+    return iterate(target, numTo, i);
+  }));
 }
 
 animate.types = require('./types');