Jump to content


Nested Draggable instances unexpected behaviour in mobile

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

Hi guys! 


I'm having a bit of trouble here with Draggable util.


I am trying to make a tabbed interface on mobile, made of a horizontal container  which can be scrolled in the X axis with sections, and sections which can have any number of posts, and can scroll in the Y axis.  With draggable, this works great in desktop when using a mouse, but when on mobile (Android, iOS, or Chrome Inspector as mobile), the X axis won't budge. 


You can watch it in action in the codepen. 


Any insight on it would be greatly appreciated :)

See the Pen pwXqMb by elujambio (@elujambio) on CodePen

Link to comment
Share on other sites

First of all, welcome to the forums.


I just tried on my iOS device and it seemed to work fine. What do I need to do to break it? 

Link to comment
Share on other sites

i'm also seeing both horizontal and vertical scrolling too on iOS8 (safari and Chrome)

Link to comment
Share on other sites



Before answering I wanted to do some further testing. The unexpected behavior was result of an old version of my code paired with Chrome Inspector but in a real scenario, the behavior is the one expected in mobile, both in Safari and Chrome.


Now, this brings me to the second case scenario: 


There are two draggable instances, one for moving the parent container .sections  horizontally, and another one to scroll each section vertically. When I leave out the second Draggable instance (of type "scrollTop", on each section), I can scroll vertically on the .section container but the Draggable instance on the parent container, .sections will not move horizontally. 


On desktop browsers the behavior is as intended, but in mobile here it is where I have some trouble getting the X axis to move.


In Chrome on Android it doesn't move horizontally, and in Safari in iOS10, it moves horizontally one section, and then it gets stuck in that section. 


I updated the Codepen commenting out the second draggable instance so that you can see what I am talking about. 


Any help is greatly appreciated. Thank you both, Jack and Carl. :)

Link to comment
Share on other sites

Try setting:


(on your Draggable)


Does that help?

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