Jump to content
GreenSock

Bertrand Larrieu

Draggable strange behaviour

Go to solution Solved by Bertrand Larrieu,

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

Hello, 

 

I'm currently working on a project in which I'm using Draggable.

 

In my page, I have some classic content  (colored pattern) and a fixed div in front of everything, in which I have my draggable (hexagons). When you're interacting with the draggable, I want the content of the page (colored patten) to be moved accordingely, so I update window.scroll on each tick with a ratio calculated from draggable.y. 

 

It works perfectely when you use the scroll button, the track pad or the scrollbar. But when you drag the draggable itself, or touch for instance, it goes crazy and draggable.y takes the min or max value randomely.

 

Here is the codepen demonstrating the issue :

 

Let me know if the problem is clearly enough explained.

And any help is more than welcome, I might be messing with Draggable internals here.

 

Thanks and have a good evening

Bertrand

 

 

 

 

 

 

See the Pen JXpKjx by lab9 (@lab9) on CodePen

Link to comment
Share on other sites

I changed scrollTo  to dragTo and it worked better.

Link to comment
Share on other sites

Hi Jimeast,

 

Thanks for your answer.

 

Do you mean replace window.scrollTo by window.dragTo ?

I don't see this dragTo function

Link to comment
Share on other sites

line 21         I forked his pen and changed window.scrollTo(0,r*m) to window.dragTo(0,r*m)  it appears he's done the same.  It was just a guess but it seemed to work now I'm wondering if window.dragTo is even a real command.

 

10 min later I copied the code onto my system and sure enough there's no such thing as "window.dragTo"  I set it back to window.,scrollTo and the console no longer reports an error but the original problem is back.  The whole tick() method is new to me and I'm out of my league here.  I just thought I made a lucky guess and I'm not clear on what he's trying to accomplish.

Link to comment
Share on other sites

  • Solution

I tested window.dragTo on the codepen, but it does not work anymore, the content is simply not scrolled.

 

 

I've played a bit with Draggable and found out how to solve my problem :

 

in onPress :

startPointerY = self.pointerY = e.pageY - window.scrollY;

in onMove

setPointerPosition(e.pageX, e.pageY - window.scrollY);

This way, even if window.scrollY is modified during drag, it keeps the correct start pointer.

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