Jump to content
Search Community

Draggable: Right edge not appearing when container has multiple elements inline

slei test
Moderator Tag

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

I have a site that lets users drag through a series of pages horizontally.  When they reach the end of a series of pages and they drag the container, the edge-resistance kicks in.  As they continue to drag against the resistance, the container still moves to the left revealing the background behind.  This is how the site is supposed to work.  This is how it used to work a few months ago.


Now what I see is different.  When I drag past the right edge, I can see that the scrollbar is "stretching" indicating the edge-resistance is working.  However, the container does not move past the edge.  It seems like the transform: translate3d() is not working.  I can see the number growing in ie translate3d(-1px, 0px, 0px) -> translate3d(-2px, 0px, 0px).  But the container is not moving.


Did something change?  I first noticed this problem in Firefox, but with the latest version of Draggable, I see it in Chrome, too (it still works in IE).


Here is a simplified demo:

Codepen URL: 


Dragging the first (green) block past the left edge produces the desired result.  But moving the last (red) block past the right edge does not.  The red block doesn't move and the gray background is not revealed.


Note: If I cut down the number of blocks to just 1, the behavior will work as expected.  Is there something I'm doing with the inline-blocks that is causing issues?


See the Pen azQaPb by stephendlei (@stephendlei) on CodePen

Link to comment
Share on other sites

Hi slei  :)


For now you can fix that with adding this to CSS :


#draggable-container > div { display:inline-block !important; }



or write this in your JS : TweenMax.set( draggable[0].scrollProxy.content , { display:'inline-block' });

var draggable = Draggable.create(yourDiv, {type:"scrollLeft"}); // create your draggable

TweenMax.set( draggable[0].scrollProxy.content , {display:'inline-block'}); // write this after draggable create
Link to comment
Share on other sites

Thanks that helped a lot!  It solved it for my code sample in Firefox and Chrome.  However it only solved it for my actual site in Chrome but not Firefox.  I will have to see what other styles I have that could be causing a conflict.



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