Jump to content
GreenSock

romaindr

Draggable - Change window scrollTop on drag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,

 

I am having trouble changing window scrolltop on drag an item.

 

I'd like to create kind of minimap of may page while draging window scroll to position.

But as soon as I add window scrollTo animation everything is flickering and I have weird y values... Any ideas?

 

Draggable.create('.el', {
        type:"y",
        cursor:'drag',
        edgeResistance:0.5,
        zIndexBoost: false,
        lockAxis:true,
        bounds:'.drag',
        onDrag:function(e){
          window.scrollTo(0,this.y*3 )
        }
      });

 

See the Pen OMBmqV by romaindr (@romaindr) on CodePen

Link to comment
Share on other sites

That's actually a very tricky thing because Draggable does a bunch of optimizations to calculate a concatenated global matrix based on the position in the browser window, making updates quicker while dragging (can you tell we obsess about performance?). It's quite an edge case to have the window's scroll position changing on a regular x/y drag (I don't think anyone has ever brought this up before). To force the Draggable to re-calculate things internally, you can call its update() method. So inside your onDrag, you could just call this.update(). The only down side is that the bounds don't get updated unless you call update(true), but in your particular case, it may not give you your desired result because once you hit the bound and keep dragging, your update() calls are refreshing stuff, thus when you start dragging the opposite way, it works immediately (again, I'm not sure if that's what you want or not). 

 

So I guess the short answer is "call this.update() inside your onDrag" :)

  • Like 1
Link to comment
Share on other sites

this.update(true) is working fine!

 

 

THX

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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