Animating icons

Added animations to the icons to invoke interaction

Author: Danny Ruchtie

packages/homepage/src/screens/home/heroB/elements.js

@@ -216,9 +216,13 @@ export const Sandbox = styled.a`
   border: none;
   background-color: transparent;
   background-size: cover;
-  transform: scale(1);
+
   transition: all 100ms ease-in;
 
+  animation: easeInOutBack 1s cubic-bezier(0.68, -0.6, 0.12, 2);
+  animation-iteration-count: 1;
+  animation-fill-mode: backwards;
+
   @media screen and (min-width: 576px) {
     width: 3rem;
     height: 3rem;
@@ -235,4 +239,16 @@ export const Sandbox = styled.a`
     transform: scale(0.9);
     opacity: 1;
   }
+
+  @keyframes easeInOutBack {
+    0% {
+      opacity: 0;
+      transform: scale(0.1);
+    }
+
+    100% {
+      opacity: 0.2;
+      transform: scale(1);
+    }
+  }
 `;

packages/homepage/src/screens/home/heroB/index.js

@@ -48,17 +48,37 @@ export default () => {
         </SubTitle>
 
         <SandboxButtons>
-          <Sandbox href="/s/new" style={{ backgroundImage: `url(${react})` }} />
+          <Sandbox
+            href="/s/new"
+            title="React"
+            style={{ backgroundImage: `url(${react})`, animationDelay: '0.5s' }}
+          />
           <Sandbox
             href="/s/vanilla"
-            style={{ backgroundImage: `url(${vanilla})` }}
+            title="Vanilla"
+            style={{
+              backgroundImage: `url(${vanilla})`,
+              animationDelay: '0.6s',
+            }}
+          />
+          <Sandbox
+            href="/s/vue"
+            title="Vue"
+            style={{ backgroundImage: `url(${vue})`, animationDelay: '0.7s' }}
           />
-          <Sandbox href="/s/vue" style={{ backgroundImage: `url(${vue})` }} />
           <Sandbox
             href="/s/angular"
-            style={{ backgroundImage: `url(${angular})` }}
+            title="Angular"
+            style={{
+              backgroundImage: `url(${angular})`,
+              animationDelay: '0.8s',
+            }}
+          />
+          <Sandbox
+            href="/s"
+            title="More"
+            style={{ backgroundImage: `url(${more})`, animationDelay: '0.9s' }}
           />
-          <Sandbox href="/s" style={{ backgroundImage: `url(${more})` }} />
         </SandboxButtons>
 
         <motion.div