Tests addAnimation method

2 files changed, 13 insertions, 16 deletions

diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 823529556..d5a503337 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {fadeIn} from 'ts/@next/constants/animations';
+import {addFadeInAnimation, fadeIn} from 'ts/@next/constants/animations';
 
 interface Props {
     title: string;
@@ -69,9 +69,7 @@ const Title = styled.h1`
     font-weight: 300;
     line-height: 1.1;
     margin-bottom: 30px;
-    opacity: 0;
-    transform: translateY(10px);
-    animation: ${fadeIn} 0.5s forwards;
+    ${addFadeInAnimation('0.5s')}
 
     @media (max-width: 1024px) {
         font-size: 60px;
@@ -87,10 +85,8 @@ const Description = styled.p`
     line-height: 31px;
     padding: 0;
     margin-bottom: 30px;
-    opacity: 0.75;
-    opacity: 0;
-    transform: translateY(0);
-    animation: ${fadeIn} 0.5s 0.15s forwards;
+    color: rgba(255, 255, 255, 0.75);
+    ${addFadeInAnimation('0.5s', '0.15s')}
 `;
 
 const Content = styled.div`
@@ -105,19 +101,14 @@ 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;
+        ${addFadeInAnimation('0.6s', '0.3s')}
     }
     > *:nth-child(2) {
-        animation: ${fadeIn} 0.6s 0.4s forwards;
+        ${addFadeInAnimation('0.6s', '0.4s')}
     }
 `;
diff --git a/packages/website/ts/@next/constants/animations.tsx b/packages/website/ts/@next/constants/animations.tsx
index aed6ffec7..6a58c4b40 100644
--- a/packages/website/ts/@next/constants/animations.tsx
+++ b/packages/website/ts/@next/constants/animations.tsx
@@ -1,4 +1,4 @@
-import { keyframes } from 'styled-components';
+import { css, keyframes } from 'styled-components';
 
 export const fadeIn = keyframes`
     0% {
@@ -10,3 +10,9 @@ export const fadeIn = keyframes`
         opacity: 1;
     }
 `;
+
+export const addFadeInAnimation = (duration: string = '0.5s', delay: string = '0s') => css`
+    opacity: 0;
+    transform: translateY(10px);
+    animation: ${fadeIn} ${duration} ${delay} forwards;
+`;