Initial API (WIP)

.gitignore

@@ -1,2 +1,6 @@
 /node_modules
 /.cache-loader
+.DS_Store
+/dist
+/lib
+/tmp

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "semi": false,
+    "trailingComma": "es5"
+}

Makefile

@@ -19,7 +19,13 @@ bootstrap:: node_modules/.yarn-integrity
 dev: bootstrap
 	webpack-dev-server --config=dev/webpack/config.js
 
+test: bootstrap
+	yarn test
+
 lint: bootstrap
-	tslint --project tsconfig.json
+	tslint --project tsconfig.json --fix
+
+pretty: bootstrap
+	prettier --write */**/*.tsx */**/*.ts
 
 .PHONY: dev lint

TODO.md

@@ -0,0 +1,6 @@
+# TODOs
+
+## Features
+- Fix prop types on `motion`
+- Coordination across children (ie `staggerChildren`): (explore later)
+- `setPose.cycle`

dev/examples/convert-value-types.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { motion, usePose } from "@framer"
+import { Box } from "../styled"
+
+const MotionBox = motion(Box)({
+    b: { width: "auto" },
+    c: { width: "calc(50vw)", x: 0 },
+    a: { width: 100, x: 100 },
+})
+
+export const App = () => {
+    const [pose, setPose] = usePose("b", ["b", "a", "c"])
+
+    return (
+        <div style={{ flex: "0 0 100%" }}>
+            <MotionBox pose={pose} onClick={() => setPose.cycle()} />
+        </div>
+    )
+}

dev/examples/custom-transition.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { motion, usePose } from "@framer"
+import { Box } from "../styled"
+import { useInterval } from "../inc/use-interval"
+
+const MotionBox = motion(Box)({
+    ping: {
+        x: 100,
+        y: "0vh",
+        opacity: 0,
+        transition: {
+            x: false,
+            default: { duration: 4000 },
+        },
+        transitionEnd: { display: "none" },
+    },
+    pong: {
+        x: -100,
+        y: "20vh",
+        opacity: 1,
+        display: "block",
+        transition: { duration: 300 },
+    },
+})
+
+export const App = () => {
+    const [pose, setPose] = usePose<typeof MotionBox>("ping")
+
+    useInterval(() => {
+        setPose(pose.get() === "ping" ? "pong" : "ping")
+    }, 1000)
+
+    return <MotionBox pose={pose} />
+}

dev/examples/dynamic-pose.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { motion, usePose } from "@framer"
+import { Box } from "../styled"
+import { useInterval } from "../inc/use-interval"
+
+const MotionBox = motion(Box)({
+    ping: {
+        x: 100,
+        y: "0vh",
+        transition: { duration: 100 },
+    },
+    pong: ({ targetValue }) => {
+        return { x: targetValue, y: "0vh" }
+    },
+})
+
+export const App = () => {
+    const [pose, setPose] = usePose<typeof MotionBox>("ping")
+
+    useInterval(() => {
+        setPose(pose.get() === "ping" ? "pong" : "ping")
+    }, 1000)
+
+    return <MotionBox pose={pose} targetValue={-100} />
+}

dev/examples/pose-as-array-prop.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { motion } from "@framer"
+import { Box } from "../styled"
+import { useInterval } from "../inc/use-interval"
+
+const MotionBox = motion(Box)({
+    a: { scale: 2 },
+    b: { scale: 0.5 },
+    c: { background: "#00f" },
+})
+
+export const App = () => {
+    const [pose, setPose] = React.useState<"a" | "b" | "c">("a")
+
+    useInterval(
+        () => {
+            setPose(pose === "a" ? "b" : "a")
+        },
+        1000,
+        [pose]
+    )
+
+    return <MotionBox pose={[pose, "c"]} />
+}

dev/examples/pose-as-hook.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { motion, usePose } from "@framer"
+import { Box } from "../styled"
+import { useInterval } from "../inc/use-interval"
+
+const MotionBox = motion(Box)({
+    ping: { x: 100 },
+    pong: { x: -100 },
+})
+
+export const App = () => {
+    const [pose, setPose] = usePose<typeof MotionBox>("ping")
+
+    useInterval(() => {
+        setPose(pose.get() === "ping" ? "pong" : "ping")
+    }, 1000)
+
+    return <MotionBox pose={pose} />
+}

dev/examples/pose-as-string-prop.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { useState } from "react"
+import { motion } from "@framer"
+import { Box } from "../styled"
+import { ComponentPoseNames } from "motion/types"
+
+const MotionBox = motion(Box)({
+    default: { scale: 1 },
+    pressed: { scale: 1.2 },
+})
+
+type Poses = ComponentPoseNames<typeof MotionBox>
+
+export const App = () => {
+    const [pose, setPose] = useState<Poses>("default")
+
+    return <MotionBox pose={pose} onMouseDown={() => setPose("pressed")} onMouseUp={() => setPose("default")} />
+}

dev/examples/pose-children.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { useState } from "react"
+import { motion } from "@framer"
+import { useInterval } from "../inc/use-interval"
+
+const Parent = motion.div({
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            staggerChildren: 50,
+        },
+    },
+    hidden: { opacity: 0, y: 100 },
+})
+
+const Child = motion.div({
+    visible: { opacity: 1, x: 0 },
+    hidden: { opacity: 0, x: -100 },
+})
+
+const parentStyles = {
+    width: 400,
+    height: 500,
+    background: "red",
+    padding: 10,
+}
+
+const childStyles = {
+    width: "100%",
+    height: 50,
+    background: "black",
+    marginBottom: 30,
+}
+
+export const App = () => {
+    const [pose, setPose] = useState<"visible" | "hidden">("hidden")
+
+    useInterval(() => setPose(pose === "hidden" ? "visible" : "hidden"), 2000, [pose])
+
+    return (
+        <Parent style={parentStyles} pose={pose}>
+            <div>
+                <Child style={childStyles} />
+                <Child style={childStyles} />
+                <Child style={childStyles} />
+            </div>
+        </Parent>
+    )
+}

dev/examples/pose-default-override.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { motion } from "@framer"
+
+const Test = React.forwardRef((props: { foo: number; bar: string }, ref: React.Ref<HTMLDivElement>) => {
+    return (
+        <div ref={ref}>
+            {props.foo},{props.bar}
+        </div>
+    )
+})
+
+const MotionBox = motion(Test)(() => {
+    return {
+        default: { rotate: 0, backgroundColor: "#f00" },
+        foo: { rotate: 45, backgroundColor: "#0f0" },
+    }
+})
+
+export const App = () => {
+    return <MotionBox pose={"foo"} foo={9} bar={"test"} />
+}

dev/examples/pose-default.tsx

@@ -0,0 +1,11 @@
+import * as React from "react"
+import { motion } from "@framer"
+import { Box } from "../styled"
+
+const MotionBox = motion(Box)({
+    default: { scale: 2, backgroundColor: "#f00" },
+})
+
+export const App = () => {
+    return <MotionBox />
+}

dev/examples/render-component.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+import { motion } from "@framer"
+import { Box } from "../styled"
+
+const MotionBox = motion(Box)()
+
+export const App = () => {
+    return <MotionBox className="test" />
+}

dev/examples/render-element.tsx

@@ -0,0 +1,8 @@
+import * as React from "react"
+import { motion } from "@framer"
+
+const MotionBox = motion.ul()
+
+export const App = () => {
+    return <MotionBox style={{ width: 100, height: 100, background: "green", padding: 0 }} />
+}

dev/inc/use-interval.ts

@@ -0,0 +1,8 @@
+import { useEffect } from "react"
+
+export const useInterval = (callback: () => void, interval: number = 1000, args: any[] = []) => {
+    useEffect(() => {
+        const int = setInterval(callback, interval)
+        return () => clearInterval(int)
+    }, args)
+}

dev/styled.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+    min-width: 100vw;
+    min-height: 100vh;
+    background: #343d48;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+export const Box = styled.div`
+    width: 100px;
+    height: 100px;
+    background: #fff;
+`

dev/webpack/config.js

@@ -1,28 +1,31 @@
-const path = require("path")
-const config = require("../../webpack.config")
-const webpack = require("webpack")
-const chalk = require("chalk")
+const path = require('path');
+const config = require('../../webpack.config');
+const webpack = require('webpack');
+const chalk = require('chalk');
 
-const DEV_SERVER_PORT = 9990
+const DEV_SERVER_PORT = 9990;
 
-console.log(chalk.bold.green(`\nRunning at: http://0.0.0.0:${DEV_SERVER_PORT}/\n`))
+console.log(
+  chalk.bold.green(`\nRunning at: http://0.0.0.0:${DEV_SERVER_PORT}/\n`)
+);
 
 config.entry = {
-    framer: [
-        "react-dev-utils/webpackHotDevClient",
-        path.join(__dirname, "..", "..", "src", "loader"),
-        path.join(__dirname, "index"),
-    ],
-}
+  framer: [
+    'react-dev-utils/webpackHotDevClient',
+    path.join(__dirname, '..', '..', 'src', 'index'),
+    path.join(__dirname, 'index')
+  ]
+};
 
 config.devServer = {
-    contentBase: path.join(__dirname),
-    hot: false,
-    inline: false,
-    // quiet: true,
-    // open: true,
-    // openPage: "/",
-    stats: "errors-only",
-    port: DEV_SERVER_PORT,
-}
-Object.assign(exports, config)
+  contentBase: path.join(__dirname),
+  hot: false,
+  inline: false,
+  // quiet: true,
+  // open: true,
+  // openPage: "/",
+  stats: 'errors-only',
+  port: DEV_SERVER_PORT
+};
+
+Object.assign(exports, config);

dev/webpack/examples.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { basename, extname } from "path"
+import { Container } from "../styled"
 
 const context = require["context"]("../examples", true, /\.(tsx?)$/)
 
@@ -53,7 +54,11 @@ export class App extends React.Component {
                 // Update the document title to the example
                 document.title = exampleName
 
-                return React.createElement(exampleApp.App)
+                return (
+                    <Container>
+                        <exampleApp.App />
+                    </Container>
+                )
             } else {
                 return (
                     <p>

jest.setup.ts

@@ -0,0 +1,2 @@
+import "jest-dom/extend-expect"
+import "react-testing-library/cleanup-after-each"