Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tristansmn

Scroll trigger & getVelocity()

Recommended Posts

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)  

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,
  };

Link to comment
Share on other sites

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.

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.
×