RADNM

I resolved it I found a similar project(https://codepen.io/akapowl/pen/rNJOrga) and solved it Thank you so much for the time and support

Hey Guys is there any way where I can manually trigger scrollTriggers so that on click and scrollTrigger both work in sync right now im im having some difficulty in syncing both onclick and scrollTrigger. The content must chnage in scrollTrigger and also when onClick also the content must change. It would be really helpful if someone can point me in the right direction or with some resources.Following is the scrollTrigger functionality useGSAP((context, contextSafe) => { const mm = gsap.matchMedia(); mm.add("(min-width:1024px)", () => { gsap.set(".content", { autoAlpha: 0 }); const headlines = gsap.utils.toArray(".text"); const totalDuration = 3000; const singleDuration = totalDuration / headlines.length; const lineTimeline = gsap.timeline(); ScrollTrigger.create({ trigger: ".pin-up", start: "top 10%", end: "+=1500px", pin: true, scrub: true, animation: lineTimeline, }); headlines.forEach((elem: any, i) => { const smallTimeline = gsap.timeline(); const content = document.querySelector(".content-wrap"); const relevantContent = content?.querySelector(`.content-${i}`)!; ScrollTrigger.create({ trigger: "body", start: "top -=" + singleDuration * i, end: "+=" + singleDuration, animation: smallTimeline, toggleActions: "play reverse play reverse", }); smallTimeline .to( elem, { duration: 0.2, color: "white", backgroundColor: "#3A60B6", borderRadius: "1.25rem", onStart: () => setActiveIndex(i), }, 0 ) .set(relevantContent, { duration: 5, autoAlpha: 1 }, 0); }); }); }, {});

Yeah it works but it skips some active chips when scrolled it doesn't work smoothly

Thank you for the support what i find difficult is a way to know which container is shown at the moment is there a way to know that . Where I want to change the rendered content div and its relevant tab chip to active state

Hey guys I'm trying to implement where I want to pin a section to the center and change the active tabs while scrolling and when the user scrolls to the last tab and when user scrolls further then the section should be unpinned and the active states of the tabs should change and the content should also be changed. Right now I couldn't implement this it changes on click only I need to have both functionalities onclick and while scrolling as well to change the active tabs and the content rendered.Please showme a way to do this with an animation when scrolled and when clicked This is the sample project that i recreated for my project https://stackblitz.com/edit/stackblitz-starters-kypshj?file=components%2FValue.tsx Thank you in advance

Thank you I got the solution

useGSAP(() => { const el = valueRef.current; const item1 = item1Ref.current; const item2 = item2Ref.current; const item3 = item3Ref.current; const mm=gsap.matchMedia(); const tl = gsap.timeline({ scrollTrigger: { trigger: el, start: "top 18%", end: "+=1500px", pin: true, markers: true, pinSpacing: true, onEnter: () => { console.log("Enter"); }, }, }); ScrollTrigger.create({ trigger: item1, start: "+=100px", end: "+=20px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(0); } }, }); ScrollTrigger.create({ trigger: item2, start: "+=100px", end: "+=200px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(1); } }, }); ScrollTrigger.create({ trigger: item3, start: "+=300px", end: "+=150px", scrub: 1, onToggle: self => { if (self.isActive) { setActiveIndex(2); } }, }); return () => { tl.set("body", { overflow: "auto" }); tl.kill(); }; }, {scope: valueRef}); Hey Guys can anyone tell me how to add match media where this should only work in screens larger than 768px I tried by inserting the code inside match media but didn't work and this is a react project. Thank you in advance

Thank you so much for the support I will look in to this😊

Hey guys Im finding trouble to get the cards appear(valueItemSection cards) when scroll triggers in that section.What i want to do is when valueSection is in the center of the screen and when user scrolls further the valueItemSection next card should appear and in the third scroll the last Item.Right now i have been able to pin the section to the center of the screen but im finding it difficult to get Value Item cards on by appear on the screen. const valueRef = useRef(null); useEffect(() => { const el = valueRef.current; const tl = gsap.timeline({ scrollTrigger: { trigger: el, start: "top 20%", end: "+=1200px", pin: true, pinSpacing: true, markers: true, onEnter: () => { console.log("Enter"); if (ScrollTrigger.isScrolling()) { console.log("Scrolling"); } }, }, }); return () => { tl.set("body", { overflow: "auto" }); tl.kill(); }; }, []); return ( <div className="container lg:mt-50 xl:mt-24 xs:mt-16 h-[100vw] "> <div className="text-center flex flex-col justify-center items-center" ref={valueRef} > <h4 className=" text-blue-50 font-normal ">LOREM IPSUM DOLOR</h4> <h3 className="text-black font-bold text-2xl lg:text-9 leading-7 lg:leading-10 mt-2"> How We Add Value </h3> <p className=" text-gray-140 font-normal text-base leading-5 lg:leading-[1.21rem] mt-6 lg:mt-4.5 sm:w-9/12 md:w-4/5 xl:w-[38rem] "> Lorem ipsum dolor sit amet consectetur. Placerat viverra id scelerisque quis sodales eget. Nam eget egestas urna id tempor amet vitae. </p> <div className="flex-row relative items-center justify-center gap-2 hidden lg:flex w-full mt-4 mb-4"> {Data.tabs.map((chip, index) => ( <ValueTab key={index} icon={chip.icon} title={chip.title} active={true} /> ))} </div> {/* Desktop view */} <div className="relative w-full hidden lg:flex flex-col gap-5 "> <ValueItemSection title={Data.items[0].title} description={Data.items[0].description} icon={Data.tabs[0].icon} chips={Data.items[0].chips} /> <ValueItemSection title={Data.items[0].title} description={Data.items[0].description} icon={Data.tabs[0].icon} chips={Data.items[0].chips} /> </div> <div className="relative w-full flex flex-col gap-5 lg:hidden "> {/* Mobile view */} {Data.items.map((item, index) => ( <ValueItemSection key={index} title={item.title} description={item.description} icon={Data.tabs[index].icon} chips={item.chips} /> ))} </div> </div> </div>