Add animation to home hero

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