Jump to content
GreenSock

krause

ShockinglyGreen
  • Posts

    3
  • Joined

  • Last visited

krause's Achievements

  1. Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!
  2. 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); } } ); } });
  3. 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
×