aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/hero.tsx21
-rw-r--r--packages/website/ts/@next/constants/animations.tsx8
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;
+`;