certusone
/
wormhole
mirror of https://github.com/certusone/wormhole.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explorer animations & fixes (#1009) 

* explorer animations & fixes

* fix breakpoint
This commit is contained in:
Adrian Timpau 2022-03-17 00:45:37 +02:00 committed by GitHub
parent f60acc59ab
commit f374047d0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 397 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
explorer/src/components/Footer.tsx
View File

@ -1,7 +1,10 @@
import { Box, IconButton, Link, Typography } from "@mui/material";
import { Link as RouterLink } from "gatsby";
import React from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useEffect } from "react";
import Discord from "../images/Discord.svg";
import shape from "../images/footer/shape.svg";
import Github from "../images/Github.svg";
@ -40,15 +43,41 @@ const socialIcon = {
},
};
const Footer = () => (
<>
const Footer = () => {
const shapeLeftf = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
gsap.from(shapeLeftf.current, {
y: 200,
x: 200,
ease: "Power3.easeOut",
scrollTrigger: {
trigger: shapeLeftf.current,
start: "60% 100%",
scrub: 1
},
})
}
}, [])
return (
<Box sx={{ position: "relative" }}>
<Box
ref={shapeLeftf}
sx={{
position: "absolute",
zIndex: -1,
transform: { xs: "", md: "translate(-50%, 0%)" },
transform: { xs: "translate(none)", md: "translate(-50%, 0%)" },
background: `url(${shape})`,
backgroundRepeat: "no-repeat",
backgroundPosition: { xs: "center center", md: "right top -426px" },
@ -275,6 +304,6 @@ const Footer = () => (
</Box>
</Box>
</>
);
export default Footer;
)
}
export default Footer;

35
explorer/src/images/apps/atlas.svg Normal file
View File

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 338.6 294.7" style="enable-background:new 0 0 338.6 294.7;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_00000074428201918211048820000015955111953353006476_);}
.st1{fill:url(#SVGID_00000104669311538768211870000000101404122542395265_);}
</style>
<g id="Layer_2_00000052078790509646841670000000813375994663887798_">
<g id="Layer_1-2">
<g>
<defs>
<path id="SVGID_1_" d="M263.9,238.7l-34.1-4.2L157.8,62.2L24.5,243.8L164.7,0L263.9,238.7z M203.2,58l81.7,196.7L98.6,230.4
l-21.3,28.4l261.3,34.4L203.2,58z M56.2,268.6l113.7-149l-13.8-33.1L0,294.7h265.9L56.2,268.6z"/>
</defs>
<clipPath id="SVGID_00000183944204005193239050000014230086248616965557_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000183944204005193239050000014230086248616965557_);">
<linearGradient id="SVGID_00000111174505500891714840000018148185228839787696_" gradientUnits="userSpaceOnUse" x1="-736.7351" y1="-415.0173" x2="-735.7351" y2="-415.0173" gradientTransform="matrix(196.5485 223.7265 -223.7265 196.5485 52054.457 246467.3594)">
<stop offset="0" style="stop-color:#FF6C21"/>
<stop offset="3.000000e-02" style="stop-color:#F66929"/>
<stop offset="0.26" style="stop-color:#AC4F6A"/>
<stop offset="0.42" style="stop-color:#7E3F92"/>
<stop offset="0.5" style="stop-color:#6C39A2"/>
<stop offset="1" style="stop-color:#403FD8"/>
</linearGradient>
<polygon style="fill:url(#SVGID_00000111174505500891714840000018148185228839787696_);" points="-146.1,128.4 191.1,-167.9
484.7,166.3 147.5,462.6 "/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

8
explorer/src/images/index/shape2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

40
explorer/src/pages/apps.tsx
View File

@ -1,11 +1,11 @@
import { Box } from "@mui/material";
import * as React from "react";
import React, { useEffect } from "react";
import { PageProps } from 'gatsby'
import GridWithCards from "../components/GridWithCards";
import HeroText from "../components/HeroText";
import Layout from "../components/Layout";
import { SEO } from "../components/SEO";
import atlas from "../images/apps/atlas.png";
import atlas from "../images/apps/atlas.svg";
import bridgesplit from "../images/apps/bridgesplit.png";
import faraway from "../images/apps/faraway.png";
import lido from "../images/apps/lido.png";
@ -14,10 +14,35 @@ import orion from "../images/apps/orion.png";
import pyth from "../images/apps/pyth.png";
import swim from "../images/apps/swim.png";
import tiexo from "../images/apps/tiexo.png";
import shape1 from "../images/index/shape1.svg";
import shape1 from "../images/index/shape2.svg";
import shape from "../images/shape.png";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { paralaxGsap, animateSwirl } from "../utils/animations";
const AppsPage = ({ location }: PageProps) => {
const headerImage = React.useRef<HTMLCanvasElement>(null);
const gradient1 = React.useRef<HTMLCanvasElement>(null);
const gradient2 = React.useRef<HTMLCanvasElement>(null);
const shapeLeft = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
animateSwirl(headerImage);
paralaxGsap(gradient1, 1000, "-50% 100%");
paralaxGsap(gradient2, 1000, "-50% 100%");
paralaxGsap(shapeLeft, 200, "20% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
}
}, [])
return (
<Layout>
<SEO
@ -41,10 +66,11 @@ const AppsPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={headerImage}
sx={{
position: "absolute",
zIndex: -1,
transform: "translate(0px, -25%) scaleX(-1)",
transform: "translate(0px, -25%)",
background: `url(${shape1})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "top -540px center",
@ -67,6 +93,7 @@ const AppsPage = ({ location }: PageProps) => {
</Box>
<Box sx={{ position: 'relative' }}>
<Box
ref={gradient1}
sx={{
position: "absolute",
zIndex: -2,
@ -81,6 +108,7 @@ const AppsPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={gradient2}
sx={{
position: "absolute",
zIndex: -2,
@ -95,6 +123,7 @@ const AppsPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeLeft}
sx={{
position: "absolute",
zIndex: -1,
@ -109,6 +138,7 @@ const AppsPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,
@ -151,7 +181,7 @@ const AppsPage = ({ location }: PageProps) => {
},
{
src: atlas,
header: "Atlas Dex",
header: "Atlas DEX",
href: "https://atlasdex.finance/",
size: 114,
description:

102
explorer/src/pages/brand.tsx
View File

@ -1,4 +1,4 @@
import * as React from "react";
import React, { useEffect } from "react";
import { Box, Button, Grid, Typography } from "@mui/material";
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
import { PageProps } from 'gatsby'
@ -7,7 +7,7 @@ import HeroText from "../components/HeroText";
import Layout from "../components/Layout";
import logos from "../images/brand/logos.svg";
import world from "../images/brand/world.svg";
import shape1 from "../images/index/shape1.svg";
import shape1 from "../images/index/shape2.svg";
import { SEO } from "../components/SEO";
import shapes from "../images/shape.png";
import shapes2 from "../images/shape2.png";
@ -35,7 +35,61 @@ import {
contact
} from "../utils/urls";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { paralaxGsap, animateSwirl, fadeInGsap } from "../utils/animations";
const BrandPage = ({ location }: PageProps) => {
const headerImage = React.useRef<HTMLCanvasElement>(null);
const gradient_1 = React.useRef<HTMLCanvasElement>(null);
const gradient_2 = React.useRef<HTMLCanvasElement>(null);
const shapeLeft = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
const shapeLeft_2 = React.useRef<HTMLCanvasElement>(null);
const gradient_3 = React.useRef<HTMLCanvasElement>(null);
const row1 = React.useRef<HTMLCanvasElement>(null);
const row2 = React.useRef<HTMLCanvasElement>(null);
const row3 = React.useRef<HTMLCanvasElement>(null);
const row4 = React.useRef<HTMLCanvasElement>(null);
const row5 = React.useRef<HTMLCanvasElement>(null);
const row6 = React.useRef<HTMLCanvasElement>(null);
const row7 = React.useRef<HTMLCanvasElement>(null);
const row8 = React.useRef<HTMLCanvasElement>(null);
const row9 = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
animateSwirl(headerImage);
paralaxGsap(gradient_1, 1000, "-50% 100%");
paralaxGsap(gradient_2, 1000, "-50% 100%");
paralaxGsap(gradient_3, 1000, "0 100%");
paralaxGsap(shapeLeft, 200, "20% 100%");
paralaxGsap(shapeLeft_2, 200, "20% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
fadeInGsap(row1);
fadeInGsap(row2);
fadeInGsap(row3);
fadeInGsap(row4);
fadeInGsap(row5);
fadeInGsap(row6);
fadeInGsap(row7);
fadeInGsap(row8);
fadeInGsap(row9);
}
}, [])
return (
<Layout>
<SEO
@ -45,6 +99,7 @@ const BrandPage = ({ location }: PageProps) => {
/>
<Box sx={{ position: "relative", marginTop: 17 }}>
<Box
ref={row1}
sx={{
position: "absolute",
zIndex: -2,
@ -59,10 +114,11 @@ const BrandPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={headerImage}
sx={{
position: "absolute",
zIndex: -1,
transform: "translate(0px, -25%) scaleX(-1)",
transform: "translate(0px, -25%)",
background: `url(${shape1})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "top -500px center",
@ -72,21 +128,15 @@ const BrandPage = ({ location }: PageProps) => {
}}
/>
<HeroText
heroSpans={["Brand"]}
subtitleText="Integrate proudly with everything you need to show off Wormhole."
heroSpans={["Brand", "assets"]}
subtitleText="Everything you need to show off Wormhole to the world."
/>
</Box>
<Box sx={{ textAlign: "center", mt: 40, px: 2 }}>
<Typography variant="h3">
<Box component="span" sx={{ color: "#FFCE00" }}>
Brand {" "}
</Box>
<Box component="span"> assets</Box>
</Typography>
<Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Everything you need to show off Wormhole to the world.</Typography>
</Box>
<Box sx={{position: 'relative'}}>
<Box sx={{position: 'relative', mt: 40,}}>
<Box
ref={gradient_1}
sx={{
position: "absolute",
zIndex: -2,
@ -101,6 +151,7 @@ const BrandPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeLeft}
sx={{
position: "absolute",
zIndex: -1,
@ -115,7 +166,7 @@ const BrandPage = ({ location }: PageProps) => {
display:{xs: 'none', md: 'block'},
}}
/>
<Box sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: {xs: 10, md:15.5} }}>
<Box ref={row2} sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: {xs: 10, md:15.5} }}>
<Box
sx={{
display: "flex",
@ -169,6 +220,7 @@ const BrandPage = ({ location }: PageProps) => {
</Box>
</Box>
<Box
ref={row3}
sx={{
display: "flex",
flexWrap: "wrap-reverse",
@ -215,6 +267,7 @@ const BrandPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box
ref={gradient_2}
sx={{
position: "absolute",
zIndex: -2,
@ -229,6 +282,7 @@ const BrandPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,
@ -257,7 +311,7 @@ const BrandPage = ({ location }: PageProps) => {
opacity: 0.7,
}}
/>
<Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Box ref={row4} sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Typography variant="h3">
<Box component="span" sx={{ color: "#FFCE00" }}>
Color {" "}
@ -266,7 +320,7 @@ const BrandPage = ({ location }: PageProps) => {
</Typography>
<Typography sx={{ mt: 2, maxWidth: 860, mx: "auto" }}>Mix and match from the color palette to fits your need.</Typography>
</Box>
<Box sx={{ m: "auto", maxWidth: 1006, px: 3.75 }}>
<Box ref={row5} sx={{ m: "auto", maxWidth: 1006, px: 3.75 }}>
<Grid container spacing={2}>
<Grid item xs={12} md={4}>
<Box
@ -455,14 +509,14 @@ const BrandPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Box ref={row6} sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Typography variant="h3">
<Box component="span" sx={{ color: "#FFCE00" }}>
Iconography
</Box>
</Typography>
</Box>
<Box sx={{ m: "auto", maxWidth: 950, px: 3.75 }}>
<Box ref={row7} sx={{ m: "auto", maxWidth: 950, px: 3.75 }}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Box
@ -528,6 +582,7 @@ const BrandPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box
ref={gradient_3}
sx={{
position: "absolute",
zIndex: -2,
@ -542,7 +597,8 @@ const BrandPage = ({ location }: PageProps) => {
}}
/>
<Box
sx={{
ref={shapeLeft_2}
sx={{
position: "absolute",
zIndex: -1,
background: `url(${shapes})`,
@ -555,7 +611,7 @@ const BrandPage = ({ location }: PageProps) => {
display:{xs: 'none', md: 'block'},
}}
/>
<Box sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Box ref={row8} sx={{ textAlign: "center", mt: 12, px: 2 }}>
<Typography variant="h3">
<Box component="span" sx={{ color: "#FFCE00" }}>
Get the {" "}
@ -576,7 +632,7 @@ const BrandPage = ({ location }: PageProps) => {
</Button>
</Box>
<Box sx={{maxWidth: 800, m:'60px auto 0', borderTop: '1px solid #585587'}}>
<Box ref={row9} sx={{maxWidth: 800, m:'60px auto 0', borderTop: '1px solid #585587'}}>
<Box sx={{
px: 3,
py:2 ,

43
explorer/src/pages/buidl.tsx
View File

@ -6,7 +6,7 @@ import {
TimelineSeparator,
} from "@mui/lab";
import { Box, Typography } from "@mui/material";
import * as React from "react";
import React, { useEffect } from "react";
import { PageProps } from 'gatsby'
import AvoidBreak from "../components/AvoidBreak";
import HeroText from "../components/HeroText";
@ -18,7 +18,40 @@ import shape1 from "../images/index/shape1.svg";
import { SEO } from "../components/SEO";
import shapes from "../images/shape.png";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { paralaxGsap, animateSwirl, fadeInGsap } from "../utils/animations";
const BuidlPage = ({ location }: PageProps) => {
const headerImage = React.useRef<HTMLCanvasElement>(null);
const gradient1 = React.useRef<HTMLCanvasElement>(null);
const gradient2 = React.useRef<HTMLCanvasElement>(null);
const shapeLeft = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
const row1 = React.useRef<HTMLCanvasElement>(null);
const row2 = React.useRef<HTMLCanvasElement>(null);
const row3 = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
animateSwirl(headerImage);
paralaxGsap(gradient1, 1000, "-50% 100%");
paralaxGsap(gradient2, 1000, "-50% 100%");
paralaxGsap(shapeLeft, 200, "20% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
fadeInGsap(row1);
fadeInGsap(row2);
fadeInGsap(row3);
}
}, [])
return (
<Layout>
<SEO
@ -42,6 +75,7 @@ const BuidlPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={headerImage}
sx={{
position: "absolute",
zIndex: -1,
@ -75,6 +109,7 @@ const BuidlPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box
ref={gradient1}
sx={{
position: "absolute",
zIndex: -2,
@ -89,6 +124,7 @@ const BuidlPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={gradient2}
sx={{
position: "absolute",
zIndex: -2,
@ -103,6 +139,7 @@ const BuidlPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeLeft}
sx={{
position: "absolute",
zIndex: -1,
@ -117,6 +154,7 @@ const BuidlPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,
@ -134,6 +172,7 @@ const BuidlPage = ({ location }: PageProps) => {
<Box sx={{ m: "auto", maxWidth: 1164, px: 3.75, mt: 15.5 }}>
<Box
ref={row1}
sx={{
display: "flex",
flexWrap: "wrap",
@ -178,6 +217,7 @@ const BuidlPage = ({ location }: PageProps) => {
</Box>
</Box>
<Box
ref={row2}
sx={{
display: "flex",
flexWrap: "wrap-reverse",
@ -223,6 +263,7 @@ const BuidlPage = ({ location }: PageProps) => {
</Box>
</Box>
<Box
ref={row3}
sx={{
display: "flex",
flexWrap: "wrap",

29
explorer/src/pages/explorer.tsx
View File

@ -1,15 +1,18 @@
import { PageProps } from "gatsby";
import { Box, } from "@mui/material";
import * as React from "react";
import React, { useEffect } from "react";
import ExplorerSearch from "../components/ExplorerSearch/ExplorerSearch"
import ExplorerStats from "../components/ExplorerStats/ExplorerStats";
import HeroText from "../components/HeroText";
import Layout from "../components/Layout";
import NetworkSelect from "../components/NetworkSelect";
import shape1 from "../images/index/shape1.svg";
import shape1 from "../images/index/shape2.svg";
import { SEO } from "../components/SEO";
import shapes from "../images/shape.png";
import { paralaxGsap, animateSwirl } from "../utils/animations";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
interface ExplorerQueryValues {
emitterChain: number;
@ -63,6 +66,23 @@ const ExplorerPage = ({ location }: PageProps) => {
setDoneReadingQueryParams(true);
}, [location.search]);
const headerImage = React.useRef<HTMLCanvasElement>(null);
const gradient_1 = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
animateSwirl(headerImage);
paralaxGsap(gradient_1, 1000, "-50% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
}
}, [])
return (
<Layout>
<SEO
@ -86,10 +106,11 @@ const ExplorerPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={headerImage}
sx={{
position: "absolute",
zIndex: -1,
transform: "translate(0px, -25%) scaleX(-1)",
transform: "translate(0px, -25%)",
background: `url(${shape1})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "top -540px center",
@ -108,6 +129,7 @@ const ExplorerPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box
ref={gradient_1}
sx={{
position: "absolute",
zIndex: -2,
@ -122,6 +144,7 @@ const ExplorerPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,

99
explorer/src/pages/index.tsx
View File

@ -27,6 +27,7 @@ import shape from "../images/shape.png";
import shape2 from "../images/shape2.png";
import { Totals, NotionalTvl } from "../components/ExplorerStats/ExplorerStats";
import { amountFormatter } from "../utils/explorer";
import { paralaxGsap, fadeInGsap, animateSwirl } from "../utils/animations";
const featuredNumber = { fontSize: 42, fontFamily: "Suisse BP Intl", fontWeight: "bold" };
const statsBaseUrl = "https://europe-west3-wormhole-315720.cloudfunctions.net/mainnet-"
@ -90,6 +91,14 @@ const IndexPage = ({ location }: PageProps) => {
const gradient1 = React.useRef<HTMLCanvasElement>(null);
const gradient2 = React.useRef<HTMLCanvasElement>(null);
const shapeLeft = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
const row1 = React.useRef<HTMLCanvasElement>(null);
const row2 = React.useRef<HTMLCanvasElement>(null);
const row3 = React.useRef<HTMLCanvasElement>(null);
const row4 = React.useRef<HTMLCanvasElement>(null);
const row5 = React.useRef<HTMLCanvasElement>(null);
function fetchStats() {
const tvlUrl = `${statsBaseUrl}notionaltvl`
@ -117,37 +126,62 @@ const IndexPage = ({ location }: PageProps) => {
gsap.registerPlugin(ScrollTrigger);
// let icons = row5.current?.children[0];
gsap.from(headerImage.current, {
scale: 1.1,
duration: 10,
delay: 1,
rotation: 3,
ease: "Power3.easeOut",
})
gsap.to(gradient1.current, {
scale: 1.2,
ease: "Power3.easeOut",
x: 300,
scrollTrigger: {
trigger: gradient1.current,
start: "-0% 0%",
end: "+=500",
scrub: 1,
},
})
gsap.from(gradient2.current, {
scale: 0.5,
ease: "Power3.easeOut",
scrollTrigger: {
trigger: gradient2.current,
start: "-50% 50%",
end: "+=1000",
scrub: 1,
},
})
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
gsap.utils.toArray(row5.current).forEach((section:any, i) => {
const img1 = section.children[0].children[0].children[0].children[0].children[0];
const img2 = section.children[0].children[1].children[0].children[0].children[0];
const img3 = section.children[0].children[2].children[0].children[0].children[0];
gsap.from(img1, {
rotation: 30,
duration: 2,
ease: "Power3.easeOut",
scrollTrigger: {
trigger: img1,
},
});
gsap.from(img2, {
rotation: 30,
duration: 3,
ease: "Power3.easeOut",
scrollTrigger: {
trigger: img2,
},
});
gsap.from(img3, {
rotation: -20,
duration: 3,
ease: "Power3.easeOut",
scrollTrigger: {
trigger: img3,
},
});
})
animateSwirl(headerImage);
paralaxGsap(gradient1, 1000, "-50% 100%");
paralaxGsap(gradient2, 1000, "-50% 100%");
paralaxGsap(shapeLeft, 200, "20% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
fadeInGsap(row1);
fadeInGsap(row2);
fadeInGsap(row3);
fadeInGsap(row4);
fadeInGsap(row5);
}
return function cleanup() {
// clear any ongoing intervals
@ -291,6 +325,7 @@ const IndexPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeLeft}
sx={{
position: "absolute",
zIndex: -1,
@ -305,6 +340,7 @@ const IndexPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={row1}
sx={{
display: "flex",
flexWrap: "wrap",
@ -369,6 +405,7 @@ const IndexPage = ({ location }: PageProps) => {
<Box
ref={row2}
sx={{
display: "flex",
flexWrap: "wrap-reverse",
@ -420,6 +457,7 @@ const IndexPage = ({ location }: PageProps) => {
<Box sx={{ position: 'relative' }}>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,
@ -435,6 +473,7 @@ const IndexPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={row3}
sx={{
display: "flex",
flexWrap: "wrap",
@ -500,7 +539,7 @@ const IndexPage = ({ location }: PageProps) => {
</Box>
</Box>
<Box sx={{ textAlign: "center", mt: 12.5, px: 2 }}>
<Box ref={row4} sx={{ textAlign: "center", mt: 12.5, px: 2 }}>
<Typography variant="h3">
<Box component="span" sx={{ color: "#FFCE00" }}>
Cross-chain
@ -512,7 +551,7 @@ const IndexPage = ({ location }: PageProps) => {
best out of every blockchain without compromise.
</Typography>
</Box>
<Box sx={{ maxWidth: 1220, mx: "auto", mt: 12, px: 3.75 }}>
<Box ref={row5} sx={{ maxWidth: 1220, mx: "auto", mt: 12, px: 3.75 }}>
<GridWithCards
data={[
{

33
explorer/src/pages/network.tsx
View File

@ -11,11 +11,11 @@ import {
TableRow,
Typography,
} from "@mui/material";
import * as React from "react";
import React, { useEffect } from "react";
import { PageProps } from 'gatsby'
import HeroText from "../components/HeroText";
import Layout from "../components/Layout";
import shape1 from "../images/index/shape1.svg";
import shape1 from "../images/index/shape2.svg";
import { Heartbeat } from "@certusone/wormhole-sdk/lib/esm/proto/gossip/v1/gossip";
import {
GrpcWebImpl,
@ -31,6 +31,11 @@ import { ChainID } from "../utils/consts";
import { SEO } from "../components/SEO";
import shapes from "../images/shape.png";
import { paralaxGsap, animateSwirl } from "../utils/animations";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
const GuardianRow = ({ hb }: { hb: Heartbeat }) => {
const [open, setOpen] = React.useState(false);
return (
@ -211,6 +216,25 @@ const GuardiansList = () => {
};
const NetworkPage = ({ location }: PageProps) => {
const headerImage = React.useRef<HTMLCanvasElement>(null);
const gradient_1 = React.useRef<HTMLCanvasElement>(null);
const shapeRight = React.useRef<HTMLCanvasElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 992) {
animateSwirl(headerImage);
paralaxGsap(gradient_1, 1000, "-50% 100%");
paralaxGsap(shapeRight, 200, "20% 100%");
}
}, [])
return (
<Layout>
<SEO
@ -234,10 +258,11 @@ const NetworkPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={headerImage}
sx={{
position: "absolute",
zIndex: -1,
transform: "translate(0px, -25%) scaleX(-1)",
transform: "translate(0px, -25%)",
background: `url(${shape1})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "top -540px center",
@ -256,6 +281,7 @@ const NetworkPage = ({ location }: PageProps) => {
</Box>
<Box sx={{position: 'relative'}}>
<Box
ref={gradient_1}
sx={{
position: "absolute",
zIndex: -2,
@ -270,6 +296,7 @@ const NetworkPage = ({ location }: PageProps) => {
}}
/>
<Box
ref={shapeRight}
sx={{
position: "absolute",
zIndex: -1,

37
explorer/src/utils/animations.ts Normal file
View File

@ -0,0 +1,37 @@
import { gsap } from "gsap";
export const fadeInGsap = (target:any)=>{
gsap.from(target.current, {
opacity: 0,
y: 100,
duration: 2,
ease: "Power3.easeOut",
clearProps: "all",
scrollTrigger: {
trigger: target.current,
start: "bottom: 70%",
},
});
}
export const paralaxGsap = (target:any, y:number, start:string) => {
gsap.from(target.current, {
ease: "Power3.easeOut",
y: y,
scrollTrigger: {
trigger: target.current,
start: start,
scrub: 1,
},
});
}
export const animateSwirl = (target:any) =>{
gsap.from(target.current, {
scale: 1.2,
duration: 10,
delay: .2,
rotation: 5,
ease: "Power3.easeOut",
})
}