tries out some transitions

2 files changed, 32 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 3a16c12bb..823529556 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import {fadeIn} from 'ts/@next/constants/animations';
+
 interface Props {
     title: string;
     description: string;
@@ -67,6 +69,9 @@ const Title = styled.h1`
     font-weight: 300;
     line-height: 1.1;
     margin-bottom: 30px;
+    opacity: 0;
+    transform: translateY(10px);
+    animation: ${fadeIn} 0.5s forwards;
 
     @media (max-width: 1024px) {
         font-size: 60px;
@@ -83,6 +88,9 @@ const Description = styled.p`
     padding: 0;
     margin-bottom: 30px;
     opacity: 0.75;
+    opacity: 0;
+    transform: translateY(0);
+    animation: ${fadeIn} 0.5s 0.15s forwards;
 `;
 
 const Content = styled.div`
@@ -97,7 +105,19 @@ const ButtonWrap = styled.div`
     display: inline-flex;
     align-items: center;
 
+    > * {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
     * + * {
         margin-left: 12px;
     }
+
+    > *:nth-child(1) {
+        animation: ${fadeIn} 0.6s 0.3s forwards;
+    }
+    > *:nth-child(2) {
+        animation: ${fadeIn} 0.6s 0.4s forwards;
+    }
 `;
diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/@next/constants/animations.tsx
new file mode 100644
index 000000000..aed6ffec7
--- /dev/null
+++ b/packages/website/ts/@next/constants/animations.tsx
@@ -0,0 +1,12 @@
+import { keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+    0% {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+`;