From c7c07a7c01c2c874e6937a998d94ea7f956f1074 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 14 Dec 2018 13:17:23 +0100 Subject: Landing page animation delay --- .../website/ts/@next/components/heroAnimation.tsx | 71 ++++++++++++---------- 1 file changed, 38 insertions(+), 33 deletions(-) (limited to 'packages/website/ts/@next') diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/@next/components/heroAnimation.tsx index 583c79754..4a21afe4e 100644 --- a/packages/website/ts/@next/components/heroAnimation.tsx +++ b/packages/website/ts/@next/components/heroAnimation.tsx @@ -1,37 +1,59 @@ import * as React from 'react'; import styled, { css, keyframes } from 'styled-components'; +export const HeroAnimation = () => ( + + + + + + + + + + + + + + +); + const moveUp = keyframes` 0% { transform: translate3d(0, 0, 0) } - 25% { transform: translate3d(0, -7%, 0) } - 50% { transform: translate3d(0, -7%, 0) } + 45% { transform: translate3d(0, 0, 0) } + 55% { transform: translate3d(0, -7%, 0) } + 85% { transform: translate3d(0, -7%, 0) } 100% { transform: translate3d(0, 0, 0) } `; const moveLeft = keyframes` 0% { transform: translate3d(0, 0, 0) } - 25% { transform: translate3d(-7%, 0, 0) } - 50% { transform: translate3d(-7%, 0, 0) } + 45% { transform: translate3d(0, 0, 0) } + 55% { transform: translate3d(-7%, 0, 0) } + 85% { transform: translate3d(-7%, 0, 0) } 100% { transform: translate3d(0, 0, 0) } `; const moveDiag = keyframes` 0% { transform: translate3d(0, 0, 0) } - 25% { transform: translate3d(5%, 5%, 0) } - 50% { transform: translate3d(5%, 5%, 0) } + 45% { transform: translate3d(0, 0, 0) } + 55% { transform: translate3d(5%, 5%, 0) } + 85% { transform: translate3d(5%, 5%, 0) } 100% { transform: translate3d(0, 0, 0) } `; const moveRight = keyframes` 0% { transform: translate3d(0, 0, 0) } - 25% { transform: translate3d(7%, 0, 0) } - 50% { transform: translate3d(7%, 0, 0) } + 45% { transform: translate3d(0, 0, 0) } + 55% { transform: translate3d(7%, 0, 0) } + 85% { transform: translate3d(7%, 0, 0) } 100% { transform: translate3d(0, 0, 0) } `; const spin = keyframes` 0% { transform: rotate(0deg) } - 50% { transform: rotate(0deg) } + 65% { transform: rotate(0deg) } + 85% { transform: rotate(90deg) } 100% { transform: rotate(90deg) } `; @@ -40,46 +62,29 @@ const moveIn = keyframes` 100% { opacity: 1; transform: scale(1) rotate(0deg) } `; -export const HeroAnimation = () => ( - - - - - - - - - - - - - - -); - const Image = styled.svg` opacity: 0; transform: scale(1.5) rotate(-30deg); - animation: ${moveIn} 3s forwards; + animation: ${moveIn} 2s forwards; `; const TopCircle = styled.circle` - animation: ${moveUp} 3s -1.5s infinite; + animation: ${moveUp} 4s -2.85s infinite; `; const LeftCircle = styled.circle` - animation: ${moveLeft} 3s -1.5s infinite; + animation: ${moveLeft} 4s -2.85s infinite; `; const Oblong = styled.path` - animation: ${moveLeft} 3s -1.5s infinite; + animation: ${moveLeft} 4s -2.85s infinite; `; const Square = styled.path` - animation: ${moveDiag} 3s -1.5s infinite; + animation: ${moveDiag} 4s -2.85s infinite; `; const Rectangle = styled.path` - animation: ${moveRight} 3s -1.5s infinite; + animation: ${moveRight} 4s -2.85s infinite; `; const Logo = styled.path` - animation: ${spin} 3s infinite; + animation: ${spin} 4s -2.65s infinite; transform-origin: 202px 202.7px; `; -- cgit v1.2.3