From c081e650677a5d763a0d69ef59d19bc3d5fc5c84 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Tue, 26 Jan 2021 19:17:12 +0100
Subject: [PATCH] Add animation to home hero

---
 package-lock.json           |  5 +++++
 package.json                |  1 +
 src/pages/index.js          | 27 +++++++++++++++++++++++++++
 src/pages/index.module.scss |  4 ++--
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7e5080..0ca25fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4232,6 +4232,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animejs": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
+      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
+    },
     "anser": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/anser/-/anser-2.0.1.tgz",
diff --git a/package.json b/package.json
index f9f875f..08993b5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/plugin-transform-typescript": "^7.12.1",
+    "animejs": "^3.2.1",
     "babel-plugin-i18next-extract": "^0.8.2",
     "gatsby": "^2.31.1",
     "gatsby-plugin-asset-path": "^3.0.2",
diff --git a/src/pages/index.js b/src/pages/index.js
index 8d54e03..5ce34e8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,6 +8,8 @@ import projectStyles from "./projects.module.scss"
 import { Trans, Link } from "gatsby-plugin-react-i18next"
 import { graphql } from "gatsby";
 
+import anime from "animejs";
+
 
 export const query = graphql`
   query GetMetaAndProjects($language: String) {
@@ -40,6 +42,31 @@ export const query = graphql`
 `;
 
 class IndexPage extends React.Component {
+  componentDidMount() {
+    anime({
+      targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"],
+      opacity: [0, 1],
+      translateX: [100, 0],
+      duration: 250,
+      delay: anime.stagger(20),
+      easing: 'easeInOutCirc'
+    });
+    anime({
+      targets: ["."+styles.profileImageDummy],
+      translateX: [0, -3],
+      translateY: [0, 3],
+      duration: 250,
+      easing: 'easeInOutCirc'
+    });
+    anime({
+      targets: ["."+styles.profileImage],
+      translateX: [0, 4],
+      translateY: [0, -4],
+      duration: 250,
+      easing: 'easeInOutCirc'
+    });
+  }
+
   render() {
     let meta = this.props.data.site.siteMetadata;
 
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 0d2198b..c124201 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -100,14 +100,14 @@
             z-index: 20;
             /*box-shadow: -5px 7px 10px -6px rgba(127,127,127,.4);*/
             box-shadow: -1px 11px 33px -10px #e5502b4b;
-            transform: translate(4px, -4px);
+            //transform: translate(4px, -4px);
         }
 
         .profileImageDummy {
             z-index: 10;
             background: $accentColor;
             opacity: .2;
-            transform: translate(-3px, 3px);
+            //transform: translate(-3px, 3px);
             /*box-shadow: 0 0 10px -10px var(--accent-color);
             background: transparent;*/
         }