Skip to content

Commit

Permalink
WIP vertical scroll effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexlsalt
alexlsalt committed Jun 2, 2022
1 parent 4eeb92d commit b24b350
Show file tree
Hide file tree
Showing 12 changed files with 7,662 additions and 686 deletions.
190 changes: 86 additions & 104 deletions components/layouts/hero_layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,10 @@ import Head from "components/head";
import Header from "components/header";
import Image from "next/image";
import arrowDown from "../../public/arrow_down.svg";
import orbitModelCoverImage from "../../public/cover_logo_orbit_model.svg";
import ReactFullpage from "@fullpage/react-fullpage";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {
Animator,
ScrollContainer,
ScrollPage,
MoveOut,
} from "react-scroll-motion";
import Slide1 from "components/slides/slide1";
import Slide2 from "components/slides/slide2";
import Slide3 from "components/slides/slide3";
Expand Down Expand Up @@ -51,13 +45,16 @@ export default function HeroLayout() {
return (
<>
<Head />
{isBrowser && (
<ScrollContainer snap="none" inView={inView}>
{!inView && <Header />}
<ScrollPage page={0}>
<div className="flex flex-col justify-evenly items-center h-screen text-white">
<div className="hidden md:block md:py-16"></div>
<Animator animation={MoveOut(-1000, 0)}>
<ReactFullpage
//fullpage options
scrollingSpeed={1000}
continuousVertical="false"
scrollBar="true"
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<div className="section flex flex-col justify-evenly items-center h-screen text-white">
<div className="hidden md:block md:py-16"></div>
<div
className="group relative"
onDragStart={preventDragHandler}
Expand All @@ -66,109 +63,94 @@ export default function HeroLayout() {
<div className="relative">
<img
src="/cover/orbits.svg"
className="relative mx-auto w-[70%] animate-spin-slow hover:"
className="relative mx-auto w-[90%] xs:w-[70%] animate-spin-slow hover:"
/>
<img
src="/cover/text.svg"
className="absolute top-[108px] p-4 bg-[#0E0A22]"
className="xs:absolute xs:top-[108px] p-4 bg-[#0E0A22]"
/>
</div>
</div>
</Animator>
{/* This ref is needed so that the app knows when to display Header */}
<div ref={ref} className="absolute top-36"></div>
{/* This ref is needed so that the app knows when to display Header */}
<div ref={ref} className="absolute top-36"></div>

<div className="hidden mt-8 md:block">
<div className="font-semibold text-center">
<div>Learn how to build and measure a thriving community</div>
<div>with the Orbit Model.</div>
</div>
<br></br>
<div className="text-center">
<p>Scroll down to start guide</p>
<div className="hidden mt-8 md:block">
<div className="font-semibold text-center">
<div>
Learn how to build and measure a thriving community
</div>
<div>with the Orbit Model.</div>
</div>
<br></br>
<Image
src={arrowDown}
alt="Purple arrow pointing down"
className="animate-bounce"
/>
<div className="text-center">
<p>Scroll down to start guide</p>
<br></br>
<Image
src={arrowDown}
alt="Purple arrow pointing down"
className="animate-bounce"
/>
</div>
</div>
</div>
</div>
</ScrollPage>

<ScrollPage page={1}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide1 />
</div>
</ScrollPage>
<ScrollPage page={2}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide2 />
</div>
</ScrollPage>
<ScrollPage page={3}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide3 />
</div>
</ScrollPage>
<ScrollPage page={4}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide4 />
</div>
</ScrollPage>
<ScrollPage page={5}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide5 />
</div>
</ScrollPage>
<ScrollPage page={6}>
<div className="flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide6 />
</div>
</ScrollPage>
<ScrollPage page={7}>
<div className="flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide7 />
</div>
</ScrollPage>
<div className="xs:block hidden">
<ScrollPage page={8}>
<div className="md:my-32"></div>
<div className="xs:block hidden overflow-y-auto pb-12 my-24 text-center md:px-8">
<h1 className="xs:text-3xl px-6 text-xl font-extrabold md:text-4xl">
Speak the cosmic language
</h1>
<p className="xs:text-lg px-6 my-4 mx-auto w-full md:my-6 md:my-12 md:w-2/3 md:text-xl">
The model is a family of concepts designed to work together,
giving your team a vocabulary and framework for visualizing
how your community works.
</p>
<div className="my-12 mx-auto w-3/4 text-lg md:w-3/4">
<div className="flex flex-wrap justify-center">
<Icon name="Gravity" href="/love"></Icon>
<Icon name="Love" href="/love"></Icon>
<Icon
name={
<span>
Orbit <br />
Levels
</span>
}
icon=""
href="/love/orbit-levels"
></Icon>
<Icon name="Roles" href="/love/roles"></Icon>
<Icon name="Reach" href="/reach"></Icon>
<Icon name="Impact" href="/impact"></Icon>
<Icon name="...more" href="/introduction"></Icon>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide1 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide2 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide3 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide4 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide5 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#0F0A25]">
<Slide6 />
</div>
<div className="section flex justify-center items-center h-screen text-white bg-[#1E1449]">
<Slide7 />
</div>
<div className="section xs:block hidden">
<div className="md:my-32"></div>
<div className="xs:block hidden pb-12 my-24 text-center md:px-8">
<h1 className="xs:text-3xl px-6 text-xl font-extrabold md:text-4xl">
Speak the cosmic language
</h1>
<p className="xs:text-lg px-6 my-4 mx-auto w-full md:my-6 md:my-12 md:w-2/3 md:text-xl">
The model is a family of concepts designed to work together,
giving your team a vocabulary and framework for visualizing
how your community works.
</p>
<div className="my-12 mx-auto w-3/4 text-lg md:w-3/4">
<div className="flex flex-wrap justify-center">
<Icon name="Gravity" href="/love"></Icon>
<Icon name="Love" href="/love"></Icon>
<Icon
name={
<span>
Orbit <br />
Levels
</span>
}
icon=""
href="/love/orbit-levels"
></Icon>
<Icon name="Roles" href="/love/roles"></Icon>
<Icon name="Reach" href="/reach"></Icon>
<Icon name="Impact" href="/impact"></Icon>
<Icon name="...more" href="/introduction"></Icon>
</div>
</div>
</div>
</div>
</ScrollPage>
</div>
</ScrollContainer>
)}
</ReactFullpage.Wrapper>
);
}}
/>
</>
);
}
4 changes: 2 additions & 2 deletions components/slides/slide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ export default function Slide({
};

return (
<div className="py-12 w-full md:px-20">
<div className="overflow-hidden py-0 w-full md:px-20">
<div
className={`${
lastSlide ? "justify-center" : "justify-start"
} flex flex-col md:flex-row items-center pt-16 md:px-0 md:pb-16 pb-8 max-w-[1200px] mx-auto`}
} flex flex-col md:flex-row items-center pt-0 md:px-0 md:pb-16 pb-8 max-w-[1200px] mx-auto`}
>
<div className="flex flex-col mb-4 space-y-9 w-full md:w-3/5">
{children}
Expand Down
6 changes: 3 additions & 3 deletions components/slides/slide1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ export default function Slide1(props) {

return (
<Slide image={slideOneImage} altText={altText} {...props}>
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<div className="xs:block flex hidden justify-center items-center px-12 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideOneImage} alt={altText} />
</div>
<div className="xs:text-3xl px-10 w-full text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
<div className="xs:text-3xl px-4 w-full text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Grow the community,
<br /> keep the soul.
</div>
<div className="xs:text-lg px-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div className="xs:text-lg px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
Legendary communities have one thing in common: they keep members happy
and fulfilled, even at scale. Take a tour of the Orbit Model to see how
it&apos;s possible.
Expand Down
38 changes: 17 additions & 21 deletions components/slides/slide2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,25 @@ export default function Slide2(props) {

return (
<Slide image={slideTwoImage} altText={altText} {...props}>
<div className="py-12 md:py-0">
<div className="xs:block flex hidden justify-center items-center mt-8 mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideTwoImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
The secret: gravity
<div className="xs:block flex hidden justify-center items-center mx-auto w-96 text-center md:hidden md:p-12 md:mt-0">
<Image src={slideTwoImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
The secret: gravity
</div>
<div className="xs:text-lg pb-0 px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
<span className="font-bold">Gravity</span> is the force of attraction
that holds the community together, drawing members into orbit and
pulling them toward the community&apos;s center.
</div>
<br></br>

<div className="xs:text-lg px-10 pb-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
<span className="font-bold">Gravity</span> is the force of
attraction that holds the community together, drawing members into
orbit and pulling them toward the community&apos;s center.
</div>
<br></br>
<div>
Gravity weakens when the community grows too fast. New members who
can&apos;t be integrated will leave quickly or stay and drive away
valuable long-time members. How do we avoid this and keep gravity
high?
</div>
<div>
Gravity weakens when the community grows too fast. New members who
can&apos;t be integrated will leave quickly or stay and drive away
valuable long-time members. How do we avoid this and keep gravity
high?
</div>
</div>
</Slide>
Expand Down
41 changes: 18 additions & 23 deletions components/slides/slide3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,24 @@ export default function Slide3(props) {
needsLargerImageSize={true}
{...props}
>
<div className="py-12 md:py-0">
<div className="pt-6 pb-12 md:py-0">
<div className="mb-4 hidden xs:block mx-auto px-0 w-[425px] md:hidden md:p-12 md:mt-0">
<Image src={slideThreeImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Deepen the love
</div>
<br></br>
<div className="xs:text-lg px-10 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
To make room for growth, we must give members clear opportunities
to deepen their involvement—we call it love—and move further
towards the community&apos;s center.
</div>
<br></br>
<div>
The speed at which this happens makes up a community&apos;s
gravity metric. This metric helps determine readiness for growth
and find bottlenecks where members aren&apos;t moving in.
</div>
</div>
<div className="mb-4 hidden xs:block mx-auto px-0 w-[425px] md:hidden md:p-12 md:mt-0">
<Image src={slideThreeImage} alt={altText} />
</div>
<br></br>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Deepen the love
</div>
<div className="xs:text-lg px-4 w-full tracking-wide leading-relaxed md:px-0 md:w-4/5 md:text-xl">
<div>
To make room for growth, we must give members clear opportunities to
deepen their involvement—we call it love—and move further towards the
community&apos;s center.
</div>
<br></br>
<div>
The speed at which this happens makes up a community&apos;s gravity
metric. This metric helps determine readiness for growth and find
bottlenecks where members aren&apos;t moving in.
</div>
</div>
</Slide>
Expand Down
33 changes: 14 additions & 19 deletions components/slides/slide4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,22 @@ export default function Slide4(props) {

return (
<Slide image={slideFourImage} altText={altText} {...props}>
<div className="py-12 md:py-0">
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 md:hidden md:p-12 md:mt-0">
<Image src={slideFourImage} alt={altText} />
</div>
<div className="xs:text-3xl px-10 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Increase love and reach
<div className="xs:block flex hidden justify-center items-center px-12 mt-8 mx-auto w-96 md:hidden md:p-12 md:mt-0">
<Image src={slideFourImage} alt={altText} />
</div>
<div className="xs:text-3xl px-4 text-xl font-extrabold md:px-0 md:w-4/5 md:text-5xl">
Increase love and reach
</div>
<div className="xs:text-lg px-4 w-full md:px-0 md:w-4/5 md:text-xl md:tracking-wide md:leading-relaxed">
<div>
Love is a measure of a member&apos;s involvement, based on what
activities they do and how often. Reach is a measure of the
member&apos;s influence and degree of connectness with other members.
</div>
<br></br>
<div className="xs:text-lg pb-8 px-10 w-full md:px-0 md:w-4/5 md:text-xl md:tracking-wide md:leading-relaxed">
<div>
Love is a measure of a member&apos;s involvement, based on what
activities they do and how often. Reach is a measure of the
member&apos;s influence and degree of connectness with other
members.
</div>
<br></br>
<div>
Community builders create programs that increase the love and reach
of their members. This creates value for members and increases
gravity.
</div>
<div>
Community builders create programs that increase the love and reach of
their members. This creates value for members and increases gravity.
</div>
</div>
</Slide>
Expand Down
Loading

0 comments on commit b24b350

Please sign in to comment.