Update animation library

Author: kohchihao

package-lock.json

@@ -30,7 +30,7 @@
     "react-helmet": "^5.2.0",
     "react-jss": "^8.6.1",
     "react-responsive-carousel": "^3.1.33",
-    "react-text-transition": "^0.1.8",
+    "react-rotating-text": "^1.4.1",
     "typeface-roboto": "0.0.54"
   },
   "keywords": [

package.json

@@ -8,7 +8,8 @@ import { withStyles } from '@material-ui/core/styles';
 
 import BannerImage from '../../commons/BannerImage';
 import { primary, hoverPrimary } from '../../../utils/Colors';
-import TextTransition, { presets } from 'react-text-transition';
+import ReactRotatingText from 'react-rotating-text';
+import '../../../css/typing.css';
 
 const styles = theme => ({
   root: {
@@ -82,21 +83,7 @@ const styles = theme => ({
   },
 });
 
-const texts = ['{bits}', '1011'];
-
 class BannerComponent extends Component {
-  state = {
-    textIndex: 0,
-  };
-
-  componentDidMount() {
-    setInterval(() => {
-      this.setState({
-        textIndex: this.state.textIndex + 1,
-      });
-    }, 4000);
-  }
-
   render() {
     const { title, description, btnOneText, btnOneLink } = this.props;
     const { classes } = this.props;
@@ -113,15 +100,9 @@ class BannerComponent extends Component {
           </Typography> */}
 
           <Typography variant="h6" className={classes.description}>
-            Every
-            <TextTransition
-              text={texts[this.state.textIndex % texts.length]}
-              spring={presets.gentle}
-              style={{ margin: '0 4px' }}
-              inline
-              overflow
-            />
-            counts.
+            {'Every '}
+            <ReactRotatingText items={['{bids}', '10110']} />
+             {' counts.'}
           </Typography>
 
           <div>

src/components/home/banner/BannerComponent.js

@@ -0,0 +1,16 @@
+.react-rotating-text-cursor {
+  animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s
+    infinite;
+}
+
+@keyframes blinking-cursor {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/css/typing.css

@@ -1,5 +1,5 @@
 ---
 name: "Alexa"
-quote: "““There is potential in every kid to become active creator of technology.” This strikes me every time when I see the joy and excitement in the eyes of our students!”"
+quote: "“There is potential in every kid to become active creator of technology. This strikes me every time when I see the joy and excitement in the eyes of our students!”"
 cover_img: "p3.png"
 ---