Jump to content


Draggable rotation only responding to drag of Y axis when nested in div with 3D transform

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'm using multiple instances of Draggable in the type:rotation and I've hit a snag.


I'm building a html based single page app for iPad, this slides horizontally through sections of content using 3d transform. You swipe vertically within a section to see slides, and swipe left or right to move through sections. It moves 1024px every section swipe.


Draggable rotation works perfectly if it appears on any slide in the first section, but the interaction is offset somehow on slides in  subsequent sections. it's as if the datum point is relative to the window, or the Draggable instance is locked in the vertical plane of dragging.


Here is the container markup of which all the code sits - I'm afraid the code is too complex to add to a codepen.

<section id="Container" class="collection" style="width: 3072px; transform: translate3d(-1024px, 0px, 0px);">


I've tried looking into the applyBounds function and defining bounds, I even took the example back to the basic one on codepen. Ive used setTimeout to see if I was calling Draggable too early. I'm stumped.



Link to comment
Share on other sites

I tried reproducing the problem in a codepen but it works in the codepen  :?


See the Pen LEYdER by anon (@anon) on CodePen


I'm basically working with code on a iPad presentation platform that I didn't write that includes every js plugin under the sun to work.
There's touchy.js going on and nested translate transform3d stuff going on with vertical and horizontal scroll.

Essentially the further the rotation is defined in a slide from 0,0 of the main container, the less you can control the dial. Kind of like the opposite of leverage.


I read an article about 3d transforms and not sure if it's anything to do with perspective but I'm pretty beat with this and might have to take Draggable out of the equation because sadly I can't change the framework I'm working with. Doh!



Link to comment
Share on other sites

Hi mikefosbrook  :)


seems your draggable correctly works , what framework you'r using !? 
try to remove touchy.js , or change configuration settings .... and see the result ... 


Link to comment
Share on other sites

You aren't loading TweenMax in your pen. After I added that I could spin the dial.


*note you have to click the big red div in order to see the dial

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