Nextjs Infinite scroll animation error , need fixing in resetting animation

[IMNOTAROBOT]

First of all , I apologize for not releasing the code  on a pen , i do have a stackblitz preview : https://stackblitz.com/edit/stackblitz-starters-pmpz5w?file=app%2Fpage.tsx  , All i want to do is reset this animation when it reaches top of the viewport . Help me do so 😭, ive tried everything , The main issue is  I want to return animation seemlessly to beginning of the port , Im using Next 14 , also do reccomend any better solutions if you do know them 

"use client"


import { useGSAP } from "@gsap/react";
import Lenis from "@studio-freight/lenis";
import { gsap } from "gsap";
import { Observer } from "gsap/Observer";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default function Home () {
  useGSAP(() => {
		const lenis = new Lenis({
			smoothWheel: true,
			smoothTouch: true,
			autoResize: true,
			infinite: true,
		});
		//@ts-ignore
		function raf(time) {
			lenis.raf(time);
			requestAnimationFrame(raf);
		}

		requestAnimationFrame(raf);
		// begin
		gsap.registerPlugin(Observer);
		gsap.registerPlugin(ScrollTrigger);

		const projectsMain = document.querySelector(".projects");

		let scrollbypercent = 0;

		const timeline = gsap.timeline({});
		timeline.set(projectsMain, { yPercent: 200 });

		function check() {
			if (ScrollTrigger.isInViewport(".projects")) {
				gsap.to(".hero", { opacity: 0.2, transform: "scale(0.9)" });
			} else {
				gsap.to(".hero", { opacity: 1, transform: "scale(1)" });
			}

			if (ScrollTrigger.positionInViewport(".projects", "bottom") < -0.2) {
        scrollbypercent = 0;
        timeline.restart();
        // 😓😓😓 what can I do here so that animation goes back to initial conditions seemlessly
			}

		}

		ScrollTrigger.observe({
			target: window,
			onUp: () => {
				check();
				gsap.to(projectsMain, { yPercent: 10 * scrollbypercent });
				scrollbypercent += 1;
			},
			onDown: () => {
				check();
				gsap.to(projectsMain, { yPercent: 10 * scrollbypercent });
				scrollbypercent -= 1;
			},
		});
	});

  


	return (
		<div className="w-full h-screen  z-0  relative text-4xl overflow-hidden ">
			<a
				className=" h-screen z-1 absolute cursor-pointer  w-full hero"
				href="https://google.com">
				Hero
			</a>
      <div className=" h-screen  projects top-0 bottom-0 left-0 right-0  z-0   absolute  ">
        One
			</div>
		</div>
	);
}

 

[GreenSock]

I noticed several problems: 

1. It's extremely inefficient code, performance-wise. Every single time the user scrolls at all, you're creating new tweens on the same elements, over and over and over again, without even overwriting (so they'd be fighting for control). At the very least, I'd recommend setting overwrite: "auto" or overwrite: true, but honestly I think I'd re-engineer the entire approach so you're not constantly doing that on every scroll. 
2. It's much more efficient to animate to scale: 0.9 or scale: 1 instead of transform: "scale(0.9)" or transform: "scale(1)". And instead of constantly creating new tweens, if your goal is to just go back and forth between those two values, why not just create a single tween instance and then play() or reverse() it? 
3. You created a "timeline" variable and you only put a set() call in it, so it literally has no duration at all. Well, it's 0 seconds. And then you're restarting that but I assume you're asking us how you could smoothly go back to that initial value, right? If so, just create a tween that goes to that value. 
4. You're not doing any cleanup of your Lenis stuff. Beware that React calls hooks TWICE in strict mode. So be careful - you might accidentally be creating redundant Lenis stuff. That's not a GreenSock product, so we can't really support it here. 

It's very difficult to offer advice when we don't have a minimal demo. If you'd like more help, please make sure you create a minimal demo that clearly illustrates the issue. That'll GREATLY increase your chances of getting a good answer. Here's a starter template with Next.js that you can fork: https://stackblitz.com/edit/nextjs-5cm4qn

[IMNOTAROBOT]

Wow , youre Right  im just new to animating and didn't know those properties existed 😅 sorry , ill fix that , the main thing i want to do is create this infinite scrolling effect ,  for that My logic is to  reset the object back to  bottom of the component. 

sorry , ill come up with a better approach , i think better approach will be to  reinsert the element just below hero element which is of height :100vh , i hope im not to annoying , i appreciate your help 

[GreenSock]

47 minutes ago, IMNOTAROBOT said:

i hope im not to annoying , i appreciate your help 

No, don't worry about it. We're very patient and understanding around here - we know it can be difficult to learn sometimes. We've all been in that position where we feel stuck and need some help. 

 

There probably is a much cleaner way to approach this. Once we see a clean minimal demo from you with your next attempt, it may become more clear. 

 

Good luck!

[IMNOTAROBOT]

Hey , I recreated  the demo , please lmk if there is something we can do here : 

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

[GreenSock]

Sorry, I'm pretty confused about exactly what you want help with. Can you please be very specific? 

 

Are you trying to "fake-scroll" an element by using an Observer to animate the yPercent? And then when it reaches a certain yPercent, you suddenly make the yPercent jump to where it started and go backwards again based on user scroll-like events? 

[IMNOTAROBOT]

yess exactly , thats what im trying to do 

[IMNOTAROBOT]

12 hours ago, GreenSock said:

Sorry, I'm pretty confused about exactly what you want help with. Can you please be very specific? 

 

Are you trying to "fake-scroll" an element by using an Observer to animate the yPercent? And then when it reaches a certain yPercent, you suddenly make the yPercent jump to where it started and go backwards again based on user scroll-like events? 

yeah exactly 

Im stuck on the go backward part of the code , this is essentially where i need to go back to 100vh below the viewport basically hiding the element  .... 

 

[GreenSock]

We don't really have the resources to build out projects for you according to various requirements (please read the forum guidelines), but I spent the time creating an Observer-based fake scroll effect that loops back down so that it appears to infinitely loop: 

See the Pen GReojLy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that gets you going in the right direction. 

 

If you still need help, please make sure you just focus on one particular thing at a time, make it a GSAP-specific question and provide a minimal demo. 👍

[IMNOTAROBOT]

Thank you @GreenSock i did it 

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