Serhat Düzgün

Thank you so much. You saved my life!

@Cassie You are awesome!!!!! Thank you so much!

I am getting data from HTML with ScrollTrigger. I have three data. I get the data-title and data-meta from the width of the Sections. In other words, this data changes when ScrollTrigger touches the sections. The third data is data-caption, these come from the photos in that list. But that doesn't seem to be a problem. So the scrolltrigger gets the html data in the images but the others don't work in sync with it.

I need to achieve this, but I couldn't do it. @Cassie scrolling.pdf

Hello everyone. In a project, we pull data with scrollTrigger and give it to the text div below. But there is a problem and I can't solve it. I am using the width of the photos for data caption. I use the section width for data-title and data-meta. I try several functions but it doesn't work. How should I go about running this? Thank you so much.

Hello all. I want to add an unlimited, ongoing scroll to a section in my project with GSAP, but I can't do it. Since I'm working with React, I haven't come across any examples. I've tried with many examples in this forum but I found one working but I can't get it to work properly either. It's not fluent. It's annoying when scrolling. I couldn't add a Codepen project, but I think the video will be enough. I will leave the codes below the video. Can you please help? gsapforum.mp4 Sorry for the quality, I compressed it because the upload limit import React, { useEffect, useRef } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import "../styles/work.scss"; import NavMenu from "../components/NavBar/NavMenu"; gsap.registerPlugin(ScrollTrigger, SplitText); const Work = () => { const workOne = useRef(); const workTwo = useRef(); const workThree = useRef(); const workFour = useRef(); const tl = gsap.timeline({ paused: true }); const tl2 = gsap.timeline({ paused: true }); const tl3 = gsap.timeline({ paused: true }); const tl4 = gsap.timeline({ paused: true }); useEffect(() => { const splitWorkOne = new SplitText(".workone-title", { type: "chars" }); const splitWorkTwo = new SplitText(".worktwo-title", { type: "chars" }); const splitWorkThree = new SplitText(".workthree-title", { type: "chars" }); const splitWorkFour = new SplitText(".workfour-title", { type: "chars" }); tl.to(workOne.current, { filter: "grayscale(100%)" }); tl.to(workOne.current, { scale: 0.99 }); tl.to(splitWorkOne.chars, { y: -40, stagger: 0.015 }, "<"); tl2.to(workTwo.current, { filter: "grayscale(100%)" }); tl2.to(workTwo.current, { scale: 0.99 }); tl2.to(splitWorkTwo.chars, { y: -40, stagger: 0.015 }, "<"); tl3.to(workThree.current, { filter: "grayscale(100%)" }); tl3.to(workThree.current, { scale: 0.99 }); tl3.to(splitWorkThree.chars, { y: -40, stagger: 0.015 }, "<"); tl4.to(workFour.current, { filter: "grayscale(100%)" }); tl4.to(workFour.current, { scale: 0.99 }); tl4.to(splitWorkFour.chars, { y: -40, stagger: 0.015 }, "<"); // Infinite scroll let panels = gsap.utils.toArray(".panel"), copy = panels[0].cloneNode(true); panels[0].parentNode.appendChild(copy); // copy the first panel to the end (for seamless looping) panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: ".menu", start: "top top", }); }); let maxScroll; let pageScrollTrigger = ScrollTrigger.create({ // snap whole page to the closest section! // normally we'd just do snap: 1 / panels.length but we'll use a function-based value so that we can handle the very start and end values in a special way to prevent looping on the snap snap(value) { let snappedValue = gsap.utils.snap(1 / panels.length, value); if (snappedValue <= 0) { // don't let it go all the way back to exactly 0 or it'll wrap. Keep it a bit more than 1px from the top. return 1.05 / maxScroll; } else if (snappedValue >= 1) { // don't let it go all the way to the end or it'll wrap. Keep it a bit more than 1px from the bottom. return maxScroll / (maxScroll + 1.05); } return snappedValue; }, }); function onResize() { maxScroll = ScrollTrigger.maxScroll(window) - 1; } onResize(); window.addEventListener("resize", onResize); // make sure we use a non-passive event listener so that we can preventDefault() on the scroll if it's at the very top or bottom window.addEventListener( "scroll", (e) => { let scroll = pageScrollTrigger.scroll(); if (scroll > maxScroll) { pageScrollTrigger.scroll(1); e.preventDefault(); } else if (scroll < 1) { pageScrollTrigger.scroll(maxScroll - 1); e.preventDefault(); } }, { passive: false } ); }, [tl, tl2, tl3, tl4]); useEffect(() => {}, []); const workOneOverHandler = () => { tl.play(); }; const workOneLeftHandler = () => { tl.reverse(); }; const workTwoOverHandler = () => { tl2.play(); }; const workTwoLeftHandler = () => { tl2.reverse(); }; const workThreeOverHandler = () => { tl3.play(); }; const workThreeLeftHandler = () => { tl3.reverse(); }; const workFourOverHandler = () => { tl4.play(); }; const workFourLeftHandler = () => { tl4.reverse(); }; return ( <div className="work-page"> <div className="work-navmenu"> <NavMenu /> </div> <div className="menu"> <div className="panel"> <div className="work-two-three-section"> <div className="work-two" ref={workTwo} onMouseEnter={workTwoOverHandler} onMouseLeave={workTwoLeftHandler} > <div className="worktwo-title-wrapper"> <h1 className="worktwo-title"> <span>•</span>Project: Stationery </h1> </div> </div> <div className="work-three" ref={workThree} onMouseEnter={workThreeOverHandler} onMouseLeave={workThreeLeftHandler} > <div className="workthree-title-wrapper"> <h1 className="workthree-title"> <span>•</span>Project: ******* </h1> </div> </div> </div> <div className="work-four-section"> <div className="work-four" ref={workFour} onMouseEnter={workFourOverHandler} onMouseLeave={workFourLeftHandler} /> <div className="workfour-title-wrapper"> <h1 className="workfour-title"> <span>•</span>Project: HANDZ </h1> </div> </div> </div> <div className="panel"> <div className="header-section"> <h2 className="recent">RECENT</h2> <div className="words-wrapper"> <h2 className="works">WORKS</h2> <h2 className="year"> <span>2</span> <span>0</span> <span>2</span> <span>2</span> </h2> </div> </div> <div className="work-one-section"> <div className="work-one" ref={workOne} onMouseEnter={workOneOverHandler} onMouseLeave={workOneLeftHandler} /> <div className="workone-title-wrapper"> <h1 className="workone-title"> <span>•</span>Project: AAART </h1> </div> </div> </div> </div> </div> ); }; export default Work; gsapforum.mp4

I want to implement distortion effect in my project. I want the background to change with this kind of effect when the user scrolls. What should I trigger with the Scroll Trigger? Here is my project: Screenshot (1).mp4 Thanks for helping me.

I had it done two minutes before I saw your reply. Thank you so much!

I have done the installation steps. I tried every way but I can't run it in HTML file. Even if I throw the gsap file in the "node_modules" section and call it with the <script> tag, it doesn't work. This is how I call "all.js" in HTML file. Tried all other ways too. <script src="src/all.js"></script> <script src="app.js"></script>