Scroll trigger & getVelocity()

[tristansmn]

Hi,

 

I'm just getting started with GSAP and scrollTrigger. I am trying to get the scroll velocity  with scroll trigger. I would like to use a var with velocity outside my scrolltrigger instance and show the velocity on the webpage when someone is scrolling. Is there a way to do that ?

 

my code here: 

 

    let scrollVelocity = 0

 

    ScrollTrigger.create({
          trigger: 'body',
          start: "top top",
          end: "bottom bottom",
          markers: true,
          scrub: 1,
          onUpdate: function(self) {
            scrollVelocity = self.getVelocity();       
          }
    });

 

console.log(scrollVelocity)  

[ZachSaucier]

Hey tristansmn and welcome to the GreenSock forums.

 

That code works. But I think you might be going for something like this instead?

let scrollVelocity = 0;

ScrollTrigger.create({
  start: 0,
  end: () => ScrollTrigger.maxScroll("html"),
  onUpdate: function(self) {
    scrollVelocity = self.getVelocity();
    console.log(scrollVelocity);
  }
});

You could even drop the scrollVelocity variable completely.

[tristansmn]

Thanks for your answer. It's more clear like that. My point is that I want to send the data in another variable when velocity is updated. I don't know if it's possible. 

 

Something like that : 

 

  let scrollVelocity = 0;

    ScrollTrigger.create({
      start: 0,
      end: () => ScrollTrigger.maxScroll("html"),
      onUpdate: function(self) {
      scrollVelocity = self.getVelocity(); 

     }
    }); 
  

  let defaultOptions = {
    loop: true,
    autoplay: true,
    speed: scrollVelocity,
    animationData: animation,
  };

[ZachSaucier]

Yep, again that works. However, most likely whatever it is that uses that object and property isn't updated. If you want to update it then you would need to call whatever method updates it inside of the onUpdate. Without seeing more of your code, it's impossible for us to say what that would be. It could be as simple as changing the text of the element that is displaying the value.