Skip to content
This repository was archived by the owner on Jul 2, 2024. It is now read-only.

Ft/animations #85

Open
f1lander wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Ft/animations #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c685057
upgrades to nextjs13
f1lander Apr 17, 2023
1e72f6b
adds font-display block
f1lander Apr 17, 2023
d206725
removes unused disable rules
f1lander Apr 18, 2023
42b6d48
adds sync
f1lander Apr 18, 2023
04bde8d
adds animations
f1lander May 5, 2023
f21d268
Merge branch 'main' into ft/animations
f1lander May 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-gtm-module": "^2.0.11",
"react-intersection-observer": "^9.4.3",
"react-svg-tooltip": "^0.0.11",
"sharp": "^0.30.6"
},
Expand Down
120 changes: 111 additions & 9 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,47 @@ import { Cta } from "../components/organisms/cta/cta";
import { Footer } from "../components/organisms/footer/footer";
import { ObolEcosystem } from "../components/organisms/obol-ecosystem/obol-ecosystem";
import { RoadMap } from "../components/organisms/roadmap/roadmap";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

const fadeIn = {
initial: { opacity: 0 },
animate: { opacity: 1, transition: { duration: 0.8 } },
exit: { opacity: 0 },
};

const fadeInUp = {
initial: { opacity: 0, y: 50 },
animate: { opacity: 1, y: 0, transition: { duration: 0.8 } },
exit: { opacity: 0, y: 50 },
};

const fadeInLeft = {
initial: { opacity: 0, x: -50 },
animate: { opacity: 1, x: 0, transition: { duration: 0.8 } },
exit: { opacity: 0, x: -50 },
};

const fadeInRight = {
initial: { opacity: 0, x: 50 },
animate: { opacity: 1, x: 0, transition: { duration: 0.8 } },
exit: { opacity: 0, x: 50 },
};

const Home: NextPage = () => {
const [heroRef, heroInView] = useInView({ triggerOnce: true });
const [ctaRef, ctaInView] = useInView({ triggerOnce: true });
const [obolEcosystemRef, obolEcosystemInView] = useInView({ triggerOnce: true });
const [ourMissionRef, ourMissionInView] = useInView({ triggerOnce: true });
const [howDvsWorkRef, howDvsWorkInView] = useInView({ triggerOnce: true });
const [obolDvcRef, obolDvcInView] = useInView({ triggerOnce: true });
const [buildWithObolRef, buildWithObolInView] = useInView({
triggerOnce: true,
});
const [distributeYourValidatorsRef, distributeYourValidatorsInView] =
useInView({ triggerOnce: true });
const [roadMapRef, roadMapInView] = useInView({ triggerOnce: true });

return (
<div>
<Head>
Expand Down Expand Up @@ -67,17 +106,80 @@ const Home: NextPage = () => {
gap: "56px",
}}
>
<HeroSection />
<OurMission />
<HowDvsWork />
<ObolDvc />
<BuildWithObol />
<motion.div
ref={heroRef}
initial="initial"
animate={heroInView ? "animate" : "exit"}
variants={fadeInUp}
>
<HeroSection />
</motion.div>
<motion.div
ref={ourMissionRef}
initial="initial"
animate={ourMissionInView ? "animate" : "exit"}
variants={fadeInLeft}
>
<OurMission />
</motion.div>
<motion.div
ref={howDvsWorkRef}
initial="initial"
animate={howDvsWorkInView ? "animate" : "exit"}
variants={fadeInRight}
>
<HowDvsWork />
</motion.div>
<motion.div
ref={obolDvcRef}
initial="initial"
animate={obolDvcInView ? "animate" : "exit"}
variants={fadeInLeft}
>
<ObolDvc />
</motion.div>
<motion.div
ref={buildWithObolRef}
initial="initial"
animate={buildWithObolInView ? "animate" : "exit"}
variants={fadeInRight}
>
<BuildWithObol />
</motion.div>
</Box>
<Box css={{ "@sm": { mt: "56px" } }} />
<DistributeYourValidators />
<RoadMap />
<ObolEcosystem />
<Cta />
<motion.div
ref={distributeYourValidatorsRef}
initial="initial"
animate={distributeYourValidatorsInView ? "animate" : "exit"}
variants={fadeIn}
>
<DistributeYourValidators />
</motion.div>
<motion.div
ref={roadMapRef}
initial="initial"
animate={roadMapInView ? "animate" : "exit"}
variants={fadeInUp}
>
<RoadMap />
</motion.div>
<motion.div
ref={obolEcosystemRef}
initial="initial"
animate={obolEcosystemInView ? "animate" : "exit"}
variants={fadeInLeft}
>
<ObolEcosystem />
</motion.div>
<motion.div
ref={ctaRef}
initial="initial"
animate={ctaInView ? "animate" : "exit"}
variants={fadeInRight}
>
<Cta />
</motion.div>
<Footer />
</div>
);
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3075,6 +3075,11 @@ react-gtm-module@^2.0.11:
resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==

react-intersection-observer@^9.4.3:
version "9.4.3"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz#ec84ce0c25cad548075130ea045ac5c7adf908f3"
integrity sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==

react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
Expand Down