Krause Posted October 5, 2022 Share Posted October 5, 2022 Hello everyone, I've fully implemented scrollSmoother which works perfectly, but my "issue"/ideal situation would be that the user would be able to scroll with the pointer as well as the other scroll options that I have from Observer type: "wheel,scroll,touch,pointer", I've implemented the scrollSmoother like this: gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother = ScrollSmoother.create({ wrapper: ".page", content: "main", smooth: 1.2, normalizeScroll: true, effects: true }); As you will see in the video attached, I'm using Observer to create a marquee based on scroll direction+speed. The pointer works here. So the big questions is, how do I make the scrollSmoother go along when i click/drag ≈ pointer? Hope I make sense—thanks! Screen Recording 2022-10-05 at 08.57.06.mov Link to comment Share on other sites More sharing options...
Rodrigo Posted October 5, 2022 Share Posted October 5, 2022 Hi @krause and welcome to the GreenSock forums! Here is an example that combines regular ScrollTrigger and ScrollSmoother with a specific section using Observer: See the Pen NWMxRvM by GreenSock (@GreenSock) on CodePen Basically what it does is tell the ScrollTrigger instance to scroll to a specific position based on the Observer interaction: 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); } }); Let us know if you have any other questions. Thank you for being a Club member and supporting GreenSock! 🥳 Happy Tweening! Link to comment Share on other sites More sharing options...
Krause Posted October 5, 2022 Author Share Posted October 5, 2022 Hi @Rodrigo—thank you. Another question: I've made a horizontal marquee which is based on the velocityY of wheel,scroll,touch. Something that I would want to implement is that I want to be able to move the marquee with click/drag instead of JUST scrolling(velocity). I don't know if that's possible yet but would really appreciate if you could assist me. I did try to implement the "draggable" library, but couldn't seem to figure out how it worked properly. I have; marquee, track, and two lists(1 original, 1 clone) Not entirely sure how it would work, but I'll explain it like this: Create new observer, target marquee, onChangeY, type: pointer.. Can you elaborate on this, would appreciate it Short HTML looks like this: <div class="marquee"> <div class="track"> <div class="list"></div> <div class="list"></div> </div> </div> My script looks like this: $(".marquee .track").each(function () { $(this).find(".list").clone().appendTo($(this).closest(".track")); }); let object = { value: 1 }; let tl = gsap.timeline({ repeat: -1, onReverseComplete: () => { tl.progress(1); } }); tl.fromTo( ".track", { xPercent: 0 }, { xPercent: -50, duration: 150, ease: "none" } ); Observer.create({ target: "main", type: "wheel,scroll,touch", onChangeY: (self) => { let v = self.velocityY * 0.01; tl.timeScale(v); let resting = 1; if (v < 0) { resting = -1; } gsap.fromTo( object, { value: v }, { value: resting, duration: 1, onUpdate: () => { tl.timeScale(object.value); } } ); } }); 4 hours ago, Rodrigo said: Hi @krause and welcome to the GreenSock forums! Here is an example that combines regular ScrollTrigger and ScrollSmoother with a specific section using Observer: Basically what it does is tell the ScrollTrigger instance to scroll to a specific position based on the Observer interaction: 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); } }); Let us know if you have any other questions. Thank you for being a Club member and supporting GreenSock! 🥳 Happy Tweening! Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 5, 2022 Share Posted October 5, 2022 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You'll significantly increase your chances of getting a good answer if you provide a minimal demo (like a CodePen). Not your whole project - just the bare minimum to show what you're trying to do. Give it a shot yourself, and then if you get stuck, post your GSAP-related question back here. 👍 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 5, 2022 Share Posted October 5, 2022 Hi, In the codepen example the horizontal section is using the Observer plugin and is watching touch, wheel and pointer events: Observer.create({ target: ".container", type: "wheel,touch,pointer", // <- THIS 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); }, // YOU CAN CHECK THE WHEEL EVENT AS WELL onWheel(self) { console.log(self.velocityY, self.deltaY) } }); You can drag with your mouse in the horizontal section and the observer is updating the scroll position using the ScrollTrigger instance. Also you can check the velocityY on the mouse wheel event : See the Pen NWMxRvM by GreenSock (@GreenSock) on CodePen Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now