diff options
| -rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 20 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/animations.tsx | 12 |
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; + } +`; |