Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable || Throwprops - enable draggable on x axis as well as native y scrolling

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

Title says it all really. Is it possible to init  draggable/throwprops on an element which draggable modifies along the x axis, but doesn't activate when it is scrolled natively on the y? 

Link to comment
Share on other sites

Hello styke..


Do you mean restrict the dragging to only the x-axis?


If so.. here is an example that restricts the draggabe to only moving in x:


See the Pen vfEFB by jonathan (@jonathan) on CodePen


Taken from Draggable docs:


type: String -

indicates the type of dragging (the properties that the dragging should affect). Any of the following work:

  • "x,y" (basically the translateX and translateY of transform)
  • "top,left"
  • "rotation"
  • "scroll"
  • "x"
  • "y"
  • "top"
  • "left"
  • "scrollTop"
  • "scrollLeft"
  • The default is "x,y" for all browsers except old versions of IE that don't natively support transforms in which case "top,left" is the default.

A limited codepen example of your code would be a great help, if this doesn't answer your question?



Link to comment
Share on other sites



I'd echo Jonathan's suggestion of a reduced codepen sample.


I'm not sure if you mean a Draggable instance that affects the X axis and another Draggable instance that affects scroll top, or the same Draggable instance that affects both properties (this would be a tricky one but defining a trigger area perhaps it'd be done).


If you refer to a Draggable instance that affects the X axis that can't be used when the element is being scrolled with the scroll bar or mouse wheel, what you could try is disable/enable the Draggable instance based on the scroll event. This snippet changes a boolean every time the user scrolls the page and 10 milliseconds after the scroll ended it changes it back:

var scrollBool = false;

  scrollBool = true;
  TweenLite.delayedCall(0.01, function()
    scrollBool = false;

Instead of changing a boolean you can disable/enable the Draggable instance.



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.