Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Horizontal Scroll #64

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

Horizontal Scroll #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8ff9a1
feat: update packages
nazarenooviedo Oct 30, 2023
dff8461
feat: horizontal scroll sections
nazarenooviedo Oct 30, 2023
baeb0ff
feat: clean code
nazarenooviedo Oct 30, 2023
eb4a985
chore: reset version
nazarenooviedo Oct 30, 2023
693cf5f
chore: apply comments
nazarenooviedo Oct 30, 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
12 changes: 6 additions & 6 deletions scrollytelling/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@
"@radix-ui/react-slot": ">=1"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@types/react": "^18.2.33",
"@types/react-dom": "^18.2.14",
"esbuild-scss-modules-plugin": "^1.1.1",
"gsap": "^3.11.5",
"gsap": "^3.12.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tsconfig": "*",
"tsup": "^6.2.3",
"type-fest": "^3.0.0",
"typescript": "^4.8.4"
"tsup": "^7.2.0",
"type-fest": "^4.6.0",
"typescript": "^5.2.2"
}
}
28 changes: 14 additions & 14 deletions scrollytelling/src/components/debugger/visualizer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,8 +484,8 @@ export const Visualizer = () => {
<path
d="M10.875 6.00004L6.398 1.52254C6.178 1.30304 5.822 1.30304 5.6025 1.52254L1.125 6.00004M9.75 4.87504V9.93754C9.75 10.248 9.498 10.5 9.1875 10.5H7.125V8.06254C7.125 7.75204 6.873 7.50004 6.5625 7.50004H5.4375C5.127 7.50004 4.875 7.75204 4.875 8.06254V10.5H2.8125C2.502 10.5 2.25 10.248 2.25 9.93754V4.87504M7.875 10.5H3.75"
stroke="white"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>

Expand All @@ -508,14 +508,14 @@ export const Visualizer = () => {
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M2.43359 8C2.43359 7.72386 2.65745 7.5 2.93359 7.5H13.0669C13.3431 7.5 13.5669 7.72386 13.5669 8C13.5669 8.27614 13.3431 8.5 13.0669 8.5H2.93359C2.65745 8.5 2.43359 8.27614 2.43359 8Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M8 2.43311C8.27614 2.43311 8.5 2.65697 8.5 2.93311L8.5 13.0664C8.5 13.3426 8.27614 13.5664 8 13.5664C7.72386 13.5664 7.5 13.3426 7.5 13.0664L7.5 2.93311C7.5 2.65697 7.72386 2.43311 8 2.43311Z"
fill="white"
/>
Expand All @@ -527,8 +527,8 @@ export const Visualizer = () => {
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M2.43359 8C2.43359 7.72386 2.65745 7.5 2.93359 7.5H13.0669C13.3431 7.5 13.5669 7.72386 13.5669 8C13.5669 8.27614 13.3431 8.5 13.0669 8.5H2.93359C2.65745 8.5 2.43359 8.27614 2.43359 8Z"
fill="white"
/>
Expand All @@ -542,8 +542,8 @@ export const Visualizer = () => {
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M12.5402 4.27333C12.7648 4.04878 12.7648 3.68471 12.5402 3.46016C12.3157 3.23561 11.9516 3.23561 11.7271 3.46016L8.00033 7.18691L4.27358 3.46016C4.04903 3.23561 3.68496 3.23561 3.46041 3.46016C3.23585 3.68471 3.23585 4.04878 3.46041 4.27333L7.18715 8.00008L3.46041 11.7268C3.23585 11.9514 3.23585 12.3154 3.46041 12.54C3.68496 12.7646 4.04903 12.7646 4.27358 12.54L8.00033 8.81325L11.7271 12.54C11.9516 12.7646 12.3157 12.7646 12.5402 12.54C12.7648 12.3154 12.7648 11.9514 12.5402 11.7268L8.8135 8.00008L12.5402 4.27333Z"
fill="white"
/>
Expand Down Expand Up @@ -610,14 +610,14 @@ export const Visualizer = () => {
>
<mask id="path-1-inside-1_2793_1632" fill="white">
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M8 0H0V8L4 11L8 8V0Z"
/>
</mask>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M8 0H0V8L4 11L8 8V0Z"
fill="white"
/>
Expand Down
1 change: 1 addition & 0 deletions website/src/app/css/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ html {
// tweak if site is light mode.
color-scheme: dark;
background-color: black;
overflow-x: hidden;
}

body {
Expand Down
4 changes: 3 additions & 1 deletion website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import { HorizontalMarquee } from "./sections/horizontal-marquee";
import { LastParallax } from "./sections/last-parallax";
import { LabIntro } from "./sections/lab-cylinder/intro";
import { LabCylinder } from "./sections/lab-cylinder";
import { HorizontalScroll } from "./sections/horizontal-scroll";

export default function HomePage() {
return (
<main>
<Hero />
<HorizontalScroll />
<FallingCaps />
<HorizontalMarquee />
<HorizontalMarquee />
<LabIntro />
{/* @ts-expect-error rsc */}
<LabCylinder />
Expand Down
41 changes: 41 additions & 0 deletions website/src/app/sections/horizontal-scroll/horizontal-scroll.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.pin-spacer {
position: relative;
z-index: 1;
}

.pin-style {
color: white;
height: 100vh;
overscroll-behavior: none;
display: flex;
flex-wrap: nowrap;
width: 500%;

.panel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;

&:nth-child(1) {
background-color: #ff4c00;
}

&:nth-child(2) {
background-color: #f09e1d;
}

&:nth-child(3) {
background-color: #e51055;
}

&:nth-child(4) {
background-color: #8a6e9c;
}

&:nth-child(5) {
background-color: #1d4bf0;
}
}
}
61 changes: 61 additions & 0 deletions website/src/app/sections/horizontal-scroll/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
"use client";

import { useMemo, useRef } from "react";
import * as Scrollytelling from "~/lib/scrollytelling-client";

import s from "./horizontal-scroll.module.scss";

export const HorizontalScroll = () => {
// Ref for the main container
const containerRef = useRef<HTMLDivElement>(null);

// Define the sections for the animation
const sectionData = [
{ label: "SECTION 1" },
{ label: "SECTION 2" },
{ label: "SECTION 3" },
{ label: "SECTION 4" },
{ label: "SECTION 5" },
];

// Calculate animation configuration for horizontal scroll
const horizontalScrollTween = useMemo(() => {
return { xPercent: -100 * (sectionData.length - 1), ease: "none" };
}, [sectionData.length]);

// Create animated section elements
const sectionElements = sectionData.map((section, index) => (
<Scrollytelling.Animation
key={index}
tween={{
start: 0,
end: 100,
to: horizontalScrollTween,
}}
>
<div className={s["panel"]}>
<h2>{section.label}</h2>
</div>
</Scrollytelling.Animation>
));

// Main component with horizontal scroll effect
return (
<Scrollytelling.Root
defaults={{ ease: "none" }}
debug={{ label: "Horizontal Scroll" }}
scrub={1}
end="+=3500"
>
<Scrollytelling.Pin
childHeight={"100vh"}
pinSpacerHeight={"500vh"}
pinSpacerClassName={s["pin-spacer"]}
childClassName={s["pin-style"]}
ref={containerRef}
>
{sectionElements}
</Scrollytelling.Pin>
</Scrollytelling.Root>
);
};
Loading