From 885c22676bd719cfd4f54883de0ebc8567585b9a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 12 Dec 2018 20:34:12 +0100 Subject: Tests landing page animation WIP --- .../website/ts/@next/components/heroAnimation.tsx | 82 +++++++++++++++++++--- packages/website/ts/@next/pages/instant.tsx | 6 +- 2 files changed, 75 insertions(+), 13 deletions(-) diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/@next/components/heroAnimation.tsx index a06c2acf4..bcef5b948 100644 --- a/packages/website/ts/@next/components/heroAnimation.tsx +++ b/packages/website/ts/@next/components/heroAnimation.tsx @@ -1,25 +1,85 @@ import * as React from 'react'; -import { cx, css, keyframes } from 'styled-components'; +import styled, { css, keyframes } from 'styled-components'; const moveUp = keyframes` 0% { transform: translate3d(0, 0, 0) } - 50% { transform: translate3d(0, -20%, 0) } + 25% { transform: translate3d(0, -7%, 0) } + 50% { 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) } + 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) } + 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) } + 100% { transform: translate3d(0, 0, 0) } +`; + +const spin = keyframes` + 0% { transform: rotate(0deg) } + 50% { transform: rotate(0deg) } + 100% { transform: rotate(359deg) } +`; + +const moveIn = keyframes` + 0% { opacity: 0; transform: scale(1.5) rotate(-30deg) } + 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; +`; + +const TopCircle = styled.circle` + animation: ${moveUp} 3s infinite; +`; +const LeftCircle = styled.circle` + animation: ${moveLeft} 3s infinite; +`; +const Oblong = styled.path` + animation: ${moveLeft} 3s infinite; +`; +const Square = styled.path` + animation: ${moveDiag} 3s infinite; +`; +const Rectangle = styled.path` + animation: ${moveRight} 3s infinite; +`; + +const Logo = styled.path` + animation: ${spin} 3s infinite; + transform-origin: 202px 202px; +`; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 34dd83f1e..a16640b54 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -137,7 +137,8 @@ const MarqueeWrap = styled.div` width: 5485px; height: 380px; display: flex; - animation: ${scroll} 20s linear infinite; + animation: ${scroll} 30s linear infinite; + will-change: transform; img { width: auto; @@ -154,7 +155,8 @@ const Card = styled.div` display: inline-block; opacity: 0; transform: translateY(10px); - animation: ${fadeUp} 0.5s ${props => `${props.index * 0.05}s`} forwards; + will-change: opacity, transform; + animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; & + & { margin-left: 15px; -- cgit v1.2.3