Jump to content
Search Community

Draggable + ThrowPropsPlugin not working

Patrick Pietens test
Moderator Tag

Go to solution Solved by Patrick Pietens,

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 guys,

 

I used your library since back in the Flash days and loved every minute working with it.

 

For the first time I'm looking at Draggable in combination with the ThrowPropsPlugin. Everything seems to be working fine. But if you have a look at my codepen you will see the content is not overscrolling to the right.

 

All other directions work perfectly fine.

I'm not sure what I'm doing wrong. Please help me out.

 

Cheers and thanks in advance.

 

UPDATE:

It seems only to happen on Chrome (Version 51.0.2704.103 (64-bit)) and Firefox. Safari seems fine.

See the Pen qNqKvd by patrickpietens (@patrickpietens) on CodePen

Link to comment
Share on other sites

This actually has to do with a browser inconsistency that's rather tricky. Safari (and most browsers) calculates the scrollable area based on the non-transformed element positioning whereas Chrome ignores that and only factors in the transformed version. Consequently, when you drag to the LEFT in Chrome enough, and it starts applying negative transforms, it collapses the container as you move. Safari doesn't collapse because it basically acts like the element was still propping things open at its original (non-transformed) position. 

 

The only way to solve this (to my knowledge at least) is to artificially prop open the scrolling container using an invisible <div> that matches the dragging element's width. That way, even if you drag all the way to the left, Chrome won't collapse the container. I've updated Draggable to do that automatically now. You can preview an uncompressed copy at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js. Does that work better for you? 

Link to comment
Share on other sites

  • Solution

Hi Carl & Jack,

 

Will give it a go now and let you know.

Thnx for your answer and your help so far.

 

UPDATE:

The beta file works like a charm. Although it feels like the performance is less than the stable version I'm using. Therefor I'm adding the div manually now.

 

Again,

Thnx for your fast reply.

 

UPDATE 2:

I've forked the pen with a working version for future reference: 

See the Pen Nrboxp by patrickpietens (@patrickpietens) on CodePen

Link to comment
Share on other sites

Hm, are you sure it's not performing as well? I can't imagine why. The only conditional logic I added was at the very end (onRelease) and it's minimal. Would you mind double-checking performance? If you really do see a difference, please let us know how we can replicate.

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