adding useTransform

package.json

@@ -37,6 +37,7 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
+    "@popmotion/popcorn": "^0.2.0",
     "hey-listen": "^1.0.5",
     "popmotion": "^8.5.2",
     "stylefire": "^2.3.1"

src/hooks/use-transform.ts

@@ -0,0 +1,22 @@
+import { useMemo, useRef } from 'react';
+import { MotionValue } from '../motion-value';
+import { interpolate } from '@popmotion/popcorn';
+
+export default (
+  value: MotionValue,
+  from: number[],
+  to: string[] | number[]
+) => {
+  const transformedValue = useRef(null);
+
+  return useMemo(
+    () => {
+      if (transformedValue.current) transformedValue.current.destroy();
+      transformedValue.current = value.addChild({
+        transformer: interpolate(from, to)
+      });
+      return transformedValue.current;
+    },
+    [value, ...from, ...to]
+  );
+};