crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Landing page animation delay

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-14 13:17:23 +01:00
parent f083cafcc7
commit c7c07a7c01
1 changed files with 51 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
packages/website/ts/@next/components/heroAnimation.tsx
View File

@@ -1,45 +1,6 @@
import * as React from 'react';
import styled, { css, keyframes } from 'styled-components';
const moveUp = keyframes`
0% { transform: translate3d(0, 0, 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(90deg) }
`;
const moveIn = keyframes`
0% { opacity: 0; transform: scale(1.7) rotate(-30deg) }
100% { opacity: 1; transform: scale(1) rotate(0deg) }
`;
export const HeroAnimation = () => (
<Image width="404" height="404" viewBox="0 0 404 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="404" height="404">
@@ -57,29 +18,73 @@ export const HeroAnimation = () => (
</Image>
);
const moveUp = keyframes`
0% { transform: translate3d(0, 0, 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) }
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) }
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) }
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) }
65% { transform: rotate(0deg) }
85% { transform: rotate(90deg) }
100% { transform: rotate(90deg) }
`;
const moveIn = keyframes`
0% { opacity: 0; transform: scale(1.7) rotate(-30deg) }
100% { opacity: 1; transform: scale(1) rotate(0deg) }
`;
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;
`;