diff --git a/Components/Card.js b/Components/Card.js
index bab6153..4043894 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -2,15 +2,25 @@
 import Styles from '../styles/Components/card.module.css';
 import react from 'react'
 import { withRouter } from "next/router";
+import handleViewport from 'react-in-viewport';
 
 class Card extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            shown: false
+        }
+    }
+
+    animateIn() {
+        setTimeout(() => {
+            this.setState({shown: true});
+        }, this.props.delay * 200);
     }
 
     render() {
         return (
-            <div className={Styles.card} style={{
+            <div className={Styles.card + " " + (this.state.shown ? Styles.shown : null)} style={{
                 margin: "0"
             }} onClick={this.props.url ? () => { this.props.router.push(this.props.url)} : null}>
                 <div className={Styles.backgroundGradient} style={{
@@ -43,16 +53,46 @@
     }
 }
 
-class CardRow extends Component {
+class CardRowClass extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            shown: false
+        }
+    }
+
+    animate() {
+        const { inViewport } = this.props;
+        console.log(inViewport)
+        if (inViewport) {
+            this.setState({shown: true});
+            react.Children.toArray(
+                react.Children.toArray(this.props.children)[0]
+                .props.children).forEach((item) => {
+                    item.ref.current.animateIn();
+                }
+            );
+        }
     }
 
     render() {
+        if (!this.state.shown) this.animate()
+        else console.log("not animating")
         return (
             <div className={Styles.container}>
                 {
                     react.Children.toArray(this.props.children).map((item, index) => {
+                        item = <Card
+                            delay={index}
+                            title={item.props.title}
+                            subtext={item.props.subtext}
+                            wave={item.props.wave}
+                            gradient={item.props.gradient}
+                            icon={item.props.icon}
+                            buttons={item.props.buttons}
+                            buttonText={item.props.buttonText}
+                            url={item.props.url}
+                        />
                         return <div className={Styles.item} key={index}>{item}</div>
                     })
                 }
@@ -62,5 +102,6 @@
 }
 
 Card = withRouter(Card);
+const CardRow = handleViewport(CardRowClass, { rootMargin: '-1.0px' });
 
 export { Card, CardRow };