# \[GSAP] một mẫu sử dụng ScrollTrigger, Observer, ScrollSmoother crack (ok) {% file src="/files/TyTl3XgeZ8fuSi4vtHwz" %} ```html ScrollSmoother: ScrambleTextPlugin3: SplitText: ``` ```javascript gsap.registerPlugin(ScrollTrigger, Observer, ScrollSmoother); ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.1 // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); let sections = gsap.utils.toArray(".panel"); let dragRatio = 1; let scrollTo; let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: false, scrub: 0.1, onRefresh: self => { dragRatio = (self.end - self.start) / ( (sections.length - 1) * sections[0].offsetWidth); }, end: "+=3000" } }); Observer.create({ target: ".container", type: "wheel,touch,pointer", onPress: self => { self.startScroll = scrollTween.scrollTrigger.scroll(); scrollTo = gsap.quickTo(scrollTween.scrollTrigger, "scroll", { duration: 0.5, ease: "power3" }); }, onDrag: self => { scrollTo(self.startScroll + (self.startX - self.x) * dragRatio); } }); // gsap.set(".box-1, .box-2", { y: 100 }); ScrollTrigger.defaults({ markers: false }); // red section gsap.to(".box-1", { y: -130, duration: 2, ease: "none", scrollTrigger: { trigger: ".box-1", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none reset", } }); // gray section gsap.to(".box-2", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: ".box-2", containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true } }); // purple section ScrollTrigger.create({ trigger: ".box-3", containerAnimation: scrollTween, toggleClass: "active", start: "center 60%" }); ScrollTrigger.create({ trigger: ".box-4", containerAnimation: scrollTween, toggleClass: "active", start: "center 60%" }); // green section ScrollTrigger.create({ trigger: ".green", containerAnimation: scrollTween, start: "center 65%", end: "center 51%", onEnter: () => { console.log("enter"); }, onLeave: () => { console.log("leave") }, onEnterBack: () => { console.log("enterBack") }, onLeaveBack: () => { console.log("leaveBack") }, onToggle: self => { console.log("active", self.isActive) }, }); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://learnhtml.gitbook.io/project/gsap-mot-mau-su-dung-scrolltrigger-observer-scrollsmoother-crack-ok.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.