refactoring

epenflow · Feb 5, 2024 · fd56acd · fd56acd
1 parent 51b351c
commit fd56acd
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 10 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -84,9 +84,31 @@
 		scrollbar-width: none;
 	}
 }
+html.lenis {
+	height: auto;
+}
+
+.lenis.lenis-smooth {
+	scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+	overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+	overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+	pointer-events: none;
+}
 .circle__clip-path {
 	clip-path: circle(100% at 50% 50%);
 }
+.square__clip-path {
+	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+}
 .markers__text {
 	background-image: linear-gradient(#00ff00, #00ff00);
 	background-size: 0 100%;

diff --git a/src/components/Section/Hero.tsx b/src/components/Section/Hero.tsx
@@ -24,21 +24,37 @@ const Hero = () => {
 			backgroundColor: 'black',
 			color: '#00ff00',
 		});
+		gsap.to('#hero__text', {
+			scrollTrigger: {
+				trigger: '#hero__text',
+				start: 'top top',
+				end: 'bottom top',
+				pin: true,
+				scrub: true,
+				pinSpacing: false,
+				invalidateOnRefresh: true,
+				pinType: 'transform',
+			},
+			yPercent: -100,
+			duration: 1.5,
+		});
 	}, []);
 
 	return (
 		<section
 			id='hero__wrapper'
-			className='-z-20'>
-			<div className='h-fit p-2 flex flex-col lg:flex-row items-center justify-between'>
+			className='-z-20 h-screen w-screen flex flex-col items-center'>
+			<div className='h-fit p-2 flex flex-col lg:flex-row items-center justify-between w-full border-b border-solid border-black bg-[#f2f2f2] z-20'>
 				<h1 className='lg:text-8xl text-7xl py-2'>Prologue</h1>
 				<h1 className=''>{date.toUTCString()}</h1>
 			</div>
 
-			<h1 className='text-center lg:text-8xl text-4xl py-4 uppercase font-mono flex items-center w-full justify-center'>
-				Bangli
+			<h1
+				id='hero__text'
+				className='text-center lg:text-8xl text-4xl py-4 uppercase font-mono flex items-center w-full justify-center h-full'>
+				&lt;--!Bangli
 				<span className='lg:h-14 lg:w-14 h-5 w-5 rounded-full bg-black block' />
-				Skatepark
+				Skatepark--&gt;
 			</h1>
 		</section>
 	);

diff --git a/src/components/Section/Home/Home.tsx b/src/components/Section/Home/Home.tsx
@@ -19,16 +19,48 @@ const Home = () => {
 		end: 'bottom top',
 		invalidateOnRefresh: true,
 	};
+	const sectionTwoTrigger = {
+		trigger: '#home__section-two',
+		pin: true,
+		scrub: true,
+		start: 'top+=25% top',
+		end: 'bottom+=25% top',
+		invalidateOnRefresh: true,
+		markers: true,
+	};
 	React.useLayoutEffect(() => {
 		const tl = gsap.timeline();
 		const markersText = gsap.utils.toArray('.markers__text');
-
+		const homeText = gsap.utils.toArray('#home__section-text');
 		const ctx = gsap.context(() => {
 			tl.to('#home__section-one', {
 				scrollTrigger: sectionOneTrigger,
 				duration: 0.5,
 				clipPath: 'circle(0% at 50% 50%)',
 			});
+			homeText.forEach((text, index) => {
+				tl.to(
+					'#home__section-text',
+					{
+						clipPath:
+							'polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)',
+						stagger: 1.5,
+						duration: 2.5,
+						scrollTrigger: {
+							trigger: text as HTMLParagraphElement,
+							pin: true,
+							scrub: 0.2,
+							start: 'top+=15% top',
+							end: 'bottom+=50% top',
+							invalidateOnRefresh: true,
+							markers: true,
+							pinSpacing: false,
+							pinType: 'fixed',
+						},
+					},
+					index + 2
+				);
+			});
 			markersText.forEach((text, index) => {
 				gsap.to(text as HTMLSpanElement, {
 					backgroundSize: '100% 100%',
@@ -51,7 +83,7 @@ const Home = () => {
 			className='w-screen lg:max-h-screen lg:h-screen flex flex-col lg:flex-row border-y border-solid border-black z-10 bg-black'>
 			<div
 				id='home__section-one'
-				className='flex items-center justify-center h-full flex-col w-full lg:w-1/2 relative overflow-hidden lg:border-none gap-2 circle__clip-path bg-[#00ff00]'>
+				className='flex items-center justify-center h-screen lg:h-full flex-col w-full lg:w-1/2 relative overflow-hidden lg:border-none gap-2 circle__clip-path bg-[#00ff00]'>
 				<h1 className='text-center text-4xl lg:text-8xl uppercase mt-14 lg:mt-0'>
 					Bupati Cup Skateboard Competition
 					<br />
@@ -74,12 +106,14 @@ const Home = () => {
 			</div>
 			<div
 				id='home__section-two'
-				className='flex flex-col h-full w-full lg:w-1/2 items-center justify-center border-t border-l border-solid border-black gap-2 box-border overflow-hidden relative bg-[#f2f2f2]'>
+				className='flex flex-col h-full w-full lg:w-1/2 items-center justify-center border-t border-l border-solid border-black gap-2 box-border overflow-hidden relative bg-[#f2f2f2] '>
 				<h1 className='text-center text-4xl uppercase mt-5 markers__text'>
 					background
 				</h1>
 				<span className='lg:mx-16 mx-5 mb-10'>
-					<p className='text-justify m-1 indent-5'>
+					<p
+						id='home__section-text'
+						className='text-justify m-1 indent-5 square__clip-path'>
 						We are part of the PSB (Persatuan Skateboarders Bali),
 						an official organization that accommodates the
 						skateboard community in the Bangli area (PSB Bangli)
@@ -97,7 +131,9 @@ const Home = () => {
 							sports.
 						</span>
 					</p>
-					<p className='text-justify m-1 indent-5'>
+					<p
+						id='home__section-text'
+						className='text-justify m-1 indent-5 square__clip-path bg-[#f2f2f2]'>
 						<span className='markers__text'>
 							With the success of the Bupati Cup Competition I
 							event last year, we want to continue this positive

diff --git a/src/lib/context/LenisScroll.tsx b/src/lib/context/LenisScroll.tsx
@@ -14,6 +14,8 @@ const LenisScroll = ({ children }: Props) => {
 				duration: 5000,
 				smoothTouch: true,
 				syncTouch: true,
+				syncTouchLerp: 0.1,
+				autoResize: true,
 			}}>
 			{children}
 		</ReactLenis>