Jump to content
Search Community

ScrollSmoother (scroll with pointer/click)

Krause test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

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

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

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

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...