Create fade in animation

Ref GH-1
hzdg · Mar 20, 2018 · 12e8f71 · 12e8f71
1 parent 44a4d75
commit 12e8f71
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "prettier": "1.11.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-motion": "^0.5.2",
     "react-styleguidist": "^6.2.7",
     "rollup-plugin-babel": "^3.0.3",
     "tapable": "^1.0.0",

diff --git a/packages/animations/hz-fade-into-view/package.json b/packages/animations/hz-fade-into-view/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "hz-fade-into-view",
+  "version": "0.0.1",
+  "description": "Fades into view its child component",
+  "main": "index.js",
+  "license": "MIT"
+}
diff --git a/packages/animations/hz-fade-into-view/readme.md b/packages/animations/hz-fade-into-view/readme.md
@@ -0,0 +1,16 @@
+```js
+    <FadeIntoView direction="Up" activate={true}>
+        <div>Boo!</div>
+    </FadeIntoView>
+```
+
+
+
+```js
+    <FadeIntoView direction="Left" activate={true}>
+        <div style={{backgroundColor: 'orange', display: 'inline-block', padding: 10}}>
+            <a href="http://www.google.com">Go to Google</a>
+            <p>Lorem ipsum dolor sit amet.</p>
+        </div>
+    </FadeIntoView>
+```
diff --git a/packages/animations/hz-fade-into-view/src/index.js b/packages/animations/hz-fade-into-view/src/index.js
@@ -0,0 +1,95 @@
+// @flow
+import React, {Component} from 'react';
+import {Motion, spring} from 'react-motion';
+
+/**
+ * Various Directions
+ */
+type Direction = 'Up' | 'Down' | 'Left' | 'Right';
+
+type Props = {
+  /**
+   * One node component that contains the content to fade in
+   */
+  children: React.Node,
+  /**
+   * The direction for the content to move into view. <br />
+   * Valid Directions are: "Up", "Down", "Left", "Right"
+   */
+  direction: Direction<string>,
+  /**
+   * Control whether not item should be active
+   */
+  activate?: boolean,
+  /**
+   * Initial position of content before it fades into view
+   */
+  offsetPosition?: number,
+};
+
+type State = {
+  activate: boolean,
+};
+
+/**
+ * Fades and moves its children into view.
+ * @extends Component
+ */
+class FadeIntoView extends Component<Props, State> {
+  static defaultProps = {
+    activate: false,
+    offsetPosition: 100,
+  };
+
+  getDirectionStyle(transformNum) {
+    switch (this.props.direction) {
+      case 'Up':
+        return `translateY(${transformNum}px)`;
+      case 'Down':
+        return `translateY(-${transformNum}px)`;
+      case 'Left':
+        return `translateX(${transformNum}px)`;
+      case 'Right':
+        return `translateX(-${transformNum}px)`;
+      default:
+        throw 'Error';
+    }
+  }
+
+  render() {
+    return (
+      <Motion
+        defaultStyle={{
+          opacityNum: 0,
+          transformNum: this.props.offsetPosition,
+        }}
+        style={{
+          opacityNum: spring(this.props.activate ? 1 : 0, {
+            stiffness: 30,
+            damping: 20,
+          }),
+          transformNum: spring(
+            this.props.activate ? 0 : this.props.offsetPosition,
+            {
+              stiffness: 120,
+              damping: 20,
+            },
+          ),
+        }}
+      >
+        {({opacityNum, transformNum}) => (
+          <div
+            style={{
+              opacity: opacityNum,
+              transform: this.getDirectionStyle(transformNum),
+            }}
+          >
+            {this.props.children}
+          </div>
+        )}
+      </Motion>
+    );
+  }
+}
+
+export default FadeIntoView;
diff --git a/yarn.lock b/yarn.lock
@@ -6532,7 +6532,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -6644,6 +6644,12 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
+raf@^3.1.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
+  dependencies:
+    performance-now "^2.1.0"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -6764,6 +6770,14 @@ react-icons@^2.2.7:
   dependencies:
     react-icon-base "2.1.0"
 
+react-motion@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
 react-styleguidist@^6.2.7:
   version "6.2.7"
   resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.7.tgz#e7e7509b73439fb3899a9dfa13125def2c25c08f"