aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:19:35 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 00:20:00 +0800
commit405667fa833413863809bbea83bf6fab8a589e87 (patch)
tree27115fd51b2bd9a4ab55b7db2c95e98083667ddb
parent0a3162915fa587c6d27e5d8ff801449b54b5642f (diff)
downloaddexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar.gz
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar.bz2
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar.lz
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar.xz
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.tar.zst
dexon-sol-tools-405667fa833413863809bbea83bf6fab8a589e87.zip
tries out some transitions
-rw-r--r--packages/website/ts/@next/components/hero.tsx20
-rw-r--r--packages/website/ts/@next/constants/animations.tsx12
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;
+ }
+`;