aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:27:24 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:27:24 +0800
commit2340813149c966a66ff24254941e4fb4ec0d1071 (patch)
tree7813fdb9898c193f7feb49113be80915381c01d2 /packages
parent405667fa833413863809bbea83bf6fab8a589e87 (diff)
downloaddexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.gz
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.bz2
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.lz
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.xz
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.tar.zst
dexon-sol-tools-2340813149c966a66ff24254941e4fb4ec0d1071.zip
Tests addAnimation method
Diffstat (limited to 'packages')
-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;
+`;