Add animation to home hero

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",

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",

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;
 

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;*/
         }