2.1.0 - exact 0% and 100% values

Author: codepunkt

.gitignore

@@ -1,3 +1,4 @@
 build
 coverage
 node_modules
+npm-debug.log

.npmignore

@@ -2,3 +2,4 @@ coverage
 src
 node_modules
 build/__tests__
+npm-debug.log

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-spring",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Generates values for physics based css-keyframe animations",
   "main": "build/index.js",
   "repository": {

src/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,8 @@
 exports[`css-spring matches snapshots 1`] = `
 Object {
+  "0%": Object {
+    "opacity": 0,
+  },
   "1%": Object {
     "opacity": 0.017,
   },
@@ -305,14 +308,17 @@ Object {
 
 exports[`css-spring matches snapshots 2`] = `
 Object {
+  "0%": Object {
+    "padding-left": -50,
+  },
   "1%": Object {
     "padding-left": -48.2,
   },
   "10%": Object {
     "padding-left": 10.30039,
   },
   "100%": Object {
-    "padding-left": 49.85832,
+    "padding-left": 50,
   },
   "11%": Object {
     "padding-left": 17.8614,
@@ -610,6 +616,10 @@ Object {
 
 exports[`css-spring matches snapshots 3`] = `
 Object {
+  "0%": Object {
+    "margin-right": 0,
+    "padding-left": -50,
+  },
   "1%": Object {
     "margin-right": 1.524,
     "padding-left": -48.8,
@@ -619,8 +629,8 @@ Object {
     "padding-left": -9.7,
   },
   "100%": Object {
-    "margin-right": 126.998,
-    "padding-left": 49.999,
+    "margin-right": 127,
+    "padding-left": 50,
   },
   "11%": Object {
     "margin-right": 57.971,

src/index.js

@@ -20,16 +20,18 @@ export const getKeyframes = (startProps, targetProps, options = {}) => {
     presets[options.preset] || {}
   )
 
-  const steps = {}
   const cache = initCache(startProps, targetProps)
+  const steps = { '0%': Object.keys(cache).reduce((accu, key) => {
+    return Object.assign(accu, { [key]: cache[key].start })
+  }, {})}
 
   for (let i = 1; i < 101; i += 1) {
     const props = {}
     Object.keys(cache).forEach((key) => {
       const prop = cache[key]
       const [value, velocity] = stepper(0.01, prop.cache.value, prop.cache.velocity, parseFloat(prop.target), stiffness, damping)
       prop.cache = { value, velocity }
-      props[key] = +prop.cache.value.toFixed(precision)
+      props[key] = +(i === 100 ? prop.target : prop.cache.value).toFixed(precision)
     })
     steps[`${i}%`] = props
   }