Initial commit

joefiorini · Sep 26, 2016 · 0f7cf13 · 0f7cf13
commit 0f7cf13
Show file tree

Hide file tree

Showing 13 changed files with 1,158 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.ico">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-3d-card-flip-demo",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.4.3"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-motion": "^0.4.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,47 @@
+.app {
+  max-width: 750px;
+  margin: 0 auto;
+}
+
+.card {
+  backface-visibility: hidden;
+  position: relative;
+}
+
+.card,
+.card__front,
+.card__back {
+  width: 300px;
+  height: 500px;
+}
+
+.card__front,
+.card__back {
+}
+
+.card__front,
+.card__back {
+  backface-visibility: hidden;
+  background-color: white;
+  border: solid 1px black;
+  transform-style: preserve-3d;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 300ms;
+}
+
+.card__back {
+}
+
+.rotate__first {
+  visibility: hidden;
+  transform: rotateY(180deg);
+}
+
+.rotate__last {
+  visibility: visible;
+  transform: rotateY(0deg);
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './App.css';
+import FlipCssTransition from './FlipCssTransition';
+import FlipReactMotion from './FlipReactMotion';
+
+class App extends Component {
+  render() {
+    return (
+      <section className="app">
+        <h1>CSS Classes</h1>
+        <FlipCssTransition />
+        <h1>React Motion</h1>
+        <FlipReactMotion />
+      </section>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/FlipCssTransition.js b/src/FlipCssTransition.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+
+export default class FlipCssTransition extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isFlipped: false,
+    };
+  }
+  render() {
+    const handleFlip = () => this.setState({ isFlipped: !this.state.isFlipped });
+
+    const frontClasses = {
+      'rotate__first': this.state.isFlipped,
+      'rotate__last': !this.state.isFlipped,
+    };
+
+    const backClasses = {
+      'rotate__last': this.state.isFlipped,
+      'rotate__first': !this.state.isFlipped,
+    };
+
+    return (
+      <section>
+        <section className="card">
+          <section className={classnames('card__front', frontClasses)}>
+            <section className="card__content">
+              Front
+            </section>
+          </section>
+          <section className={classnames('card__back', backClasses)}>
+            <section className="card__content">
+              Back
+            </section>
+          </section>
+        </section>
+        <button onClick={handleFlip}>Flip</button>
+      </section>
+    );
+  }
+}
diff --git a/src/FlipReactMotion.js b/src/FlipReactMotion.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import {Motion, spring, presets} from 'react-motion';
+
+export default class FlipReactMotion extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isFlipped: false,
+    };
+  }
+  render() {
+    const handleFlip = () => this.setState({ isFlipped: !this.state.isFlipped });
+    const stiffness = 255;
+    const damping = 10;
+
+    const frontStyle = {
+      rotation: spring(0, { stiffness, damping }),
+    };
+
+    const backStyle = {
+      rotation: spring(180, { stiffness, damping }),
+    };
+
+    return (
+      <section>
+        <section className="card">
+          <Motion style={this.state.isFlipped ? backStyle : frontStyle}>
+            {({ visibility, rotation}) =>
+              <section className='card__front' style={{
+                  transform: `rotateY(${rotation}deg)`,
+                  zIndex: 1,
+                }}>
+                <section className="card__content">
+                  Front
+                </section>
+              </section>
+            }
+          </Motion>
+          <Motion style={this.state.isFlipped ? frontStyle : backStyle}>
+            {({ visibility, rotation}) =>
+              <section className='card__back' style={{
+                  transform: `rotateY(${rotation}deg)`,
+                  zIndex: 0,
+                }}>
+                <section className="card__content">
+                  Back
+                </section>
+              </section>
+            }
+          </Motion>
+        </section>
+        <button onClick={handleFlip}>Flip</button>
+      </section>
+    );
+  }
+}
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/logo.svg b/src/logo.svg