Please Anyone Help Me recreate This Stunning Infinity Scrolling Effect In REACT .

[IMNOTAROBOT]

Please Help Me recreate The awesome animation In React 

https://www.nathansmith.design

 

Im stuck at infinite vertical scrolling and also the scrollup effect  on main text 😓 I tried to understand with context of this post but it was too hard to do so because im new to the concept : 

 

Please do help me out 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

For the infinite scroll thing, notice that there's no scrollbar at all; it's probably just listening for scroll-like events and then scrubbing the playhead on a timeline accordingly. You could do that using the Observer plugin. 

 

As for React, make sure you check out the article(s) at https://gsap.com/react

 

I hope that helps!

[IMNOTAROBOT]

yes this is helpful , I tried something with this , think you can help me fix the issue in this react code ??? 
 

"use client"
import { HeroSystem } from '@/components/HeroSystem';

import HeroSystemSmall from '@/components/HeroSystemSmall';

import React, { useEffect,useRef } from 'react';

import Lenis from "@studio-freight/lenis";
import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

import Link from 'next/link';
import { EmailComponent } from "@/components/EmailComponent";
import { Observer } from 'gsap/all';


export default function Home () {





	
	useEffect(() => {
		const lenis = new Lenis();
		

		//@ts-ignore
		function raf(time) {
			lenis.raf(time);
			requestAnimationFrame(raf);
		}

		requestAnimationFrame(raf);


		gsap.registerPlugin(ScrollTrigger);
		gsap.registerPlugin(Observer);

		let sections = document.querySelectorAll(".section");
		const wrap = gsap.utils.wrap(0, sections.length);
		let animating = false; 
		let currentIndex = 0; 
		sections.forEach((section, i) =>
		gsap.set(section,{ yPercent: 100*i, autoAlpha: 1 }));
		gsap.set(sections[0], { yPercent: 0, autoAlpha: 1});
	
		function gotoSection (CurrentCalledIndex: number, direction: 1 | -1) {
			animating = true;
			CurrentCalledIndex = wrap(CurrentCalledIndex);
			let CurrentSection = sections[CurrentCalledIndex];
			let tl = gsap.timeline({
				defaults: { duration: 1, ease: "expo.inOut" },
				onComplete: () => {
					animating = false;
				},
			});

			if (CurrentCalledIndex === 0) {
				CurrentSection = sections[0];
				gsap.set(CurrentSection, {
					opacity: 0.2, fontSize: "40px",
				
				
				});
			} else { 
				//animate generic section
				tl.to(CurrentSection, { yPercent: 0,autoAlpha:1 });
			}
			currentIndex = CurrentCalledIndex;
		 };
	
		
Observer.create({
	type: "wheel,touch,pointer,scroll",
	preventDefault: true,
	wheelSpeed: -1,
	onUp: () => {
		gotoSection(currentIndex - 1, -1);

	},
	onDown: () => {
		
		gotoSection(currentIndex + 1, 1);
	},
	tolerance: 10,
	target:window
});

document.addEventListener("keydown", logKey);
		
//@ts-ignore
function logKey(e) {
	console.log(e.code);
	if ((e.code === "ArrowUp" || e.code === "ArrowLeft") && !animating) {
		gotoSection(currentIndex - 1, -1);
	}
	if (
		(e.code === "ArrowDown" ||
			e.code === "ArrowRight" ||
			e.code === "Space" ||
			e.code === "Enter") &&
		!animating
	) {
		gotoSection(currentIndex + 1, 1);
	}
}



	}
	, [])

		



	return (
		<main>
			<div className="" />
			<div className="section  ">
				<section className="  items-center justify-center pt-20 md:flex  hidden  ">
					<HeroSystem />
				</section>

				<section className="flex items-center justify center sm:hidden w-full min-h-screen">
					<HeroSystemSmall />
				</section>
				<footer
					className=" mb-20  flex justify-around   
				
				absolute z-10 w-full ">
					<div className=" flex items-start flex-col  justify-start w-full ">
						<Link
							href="mail:kathawalearyan9@gmail.com"
							className=" sm:text-xl text-[#ffffe0] w-full ">
							kathawalearyan9@gmail.com -&gt;
						</Link>
						<EmailComponent />

						<div className="flex gap-2">
							<Link
								href="https://www.instagram.com/kiritocode1"
								target="_blank"
								className="sm:text-xl  text-[#ffffe0]">
								Insta -&gt;
							</Link>
							<Link
								href="https://www.instagram.com/kiritocode1"
								target="_blank"
								className="sm:text-xl  text-[#ffffe0]">
								Linkedin -&gt;
							</Link>
						</div>
					</div>
					<p className="sm:text-2xl w-full text-end text-[#ffffe0]  flex flex-col  justify-end">
						©Aryan kathawale 2024
					</p>
				</footer>
			</div>
			<div>
				<div className="section w-full   h-screen z-max absolute top-0  ">
					Hello
				</div>
			</div>
			<div>

			</div>
		</main>
	);
}

 

[IMNOTAROBOT]

I feel like im soo close  i could feel it , ohh btw HeroSection is just an animated div , nothing else  , thanks 

[GSAP Helper]

Hi,

 

Unfortunately there is nothing we can do without a minimal demo. We have a collection of React starter templates for integrating GSAP on React projects:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

On top of that when working in React projects, proper animation cleanup is very important. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[IMNOTAROBOT]

heyy I did what you asked me to do , here is the preview , https://stackblitz.com/edit/stackblitz-starters-pmpz5w?file=app%2Fpage.tsx     , please let me know  if there is something i can do here

[GreenSock]

That demo isn't working at all. And please don't double-post. I replied to your other thread where you ask about the same thing. Please apply the suggestions provided there and then if you're still struggling, you can post a revised minimal demo that illustrates the problem and we'd be happy to take a look. 

[IMNOTAROBOT]

Again , thank you for your help , i did it 

See the Pen BabjVOE?editors=1010 by aryan-kathawale (@aryan-kathawale) on CodePen