IMNOTAROBOT

Again , thank you for your help , i did it https://codepen.io/aryan-kathawale/pen/BabjVOE?editors=1010

Thank you @GreenSock i did it https://codepen.io/aryan-kathawale/pen/BabjVOE?editors=1010

@GreenSock I did it 🥳 thank you for your help here is the updated codepen : https://codepen.io/aryan-kathawale/pen/BabjVOE?editors=1010

Hello there , I was hoping To Recreate this effect i saw on Nathan Smith's portfolio , there is this sick Infinite scrolling animation Which i Really liked and wanted to recreate that . CodePen Example THINKING PROCESS : There are 2 divs , Hero and Projects . There are two Seperate observers , one tracking the scrolling of window and another tracking if process div is in view port If Projects is in viewport , tween hero YPercent property of Process is also changed everytime user scrolls using the OnUp and OnDown process ( i know this is inefficient , idk better way to do so ) . I am also tracking the ScrollTrigger.positionInViewport(".projects", "bottom") value . if the above value goes lower than a certain threshold , i want to trigger "reset" to animation. PROBLEM: idk how to reset the animation such that projects goes back to initial conditions and animation restarts seemlessly. I would really appreciate if you would give the code a look , also checkout nathan's website and how he implemented it . thank you and Happy new year

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 ....

yess exactly , thats what im trying to do

Hey , I recreated the demo , please lmk if there is something we can do here : https://codepen.io/aryan-kathawale/pen/YzgybVL?editors=1010

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

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

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> ); }

wow , just wow

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

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> ); }

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