diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:19:35 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:20:00 +0800 |
commit | 405667fa833413863809bbea83bf6fab8a589e87 (patch) | |
tree | 27115fd51b2bd9a4ab55b7db2c95e98083667ddb /packages/website/ts/@next/components/hero.tsx | |
parent | 0a3162915fa587c6d27e5d8ff801449b54b5642f (diff) | |
download | dexon-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
Diffstat (limited to 'packages/website/ts/@next/components/hero.tsx')
-rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 20 |
1 files changed, 20 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; + } `; |