Jump to content
Search Community

setting draggable type to none?

boynet 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 want to use draggable without it setting any style for me while dragging

I found out about zIndexBoost: false to prevent it from messing up with the z index values.

 

cant find anyway to prevent it from dealing with translate3d values, did I missed something?

 

thanks :)

Link to comment
Share on other sites

hmm I am new to gsap world so maybe I am missing something, draggable is the only "touch" module in greensock no?

 

I am creating an effect that can be controlled by dragging\touching very similar to slider\carousel but the only thing that change when dragget is the rotateY property of the element.

 

so I don't need any of the default styling options..

Link to comment
Share on other sites

Ah, I see. For that, it's probably best to use an invisible <div> or something and then use an onDrag to apply the x/y values to whatever other property you want (in this case, rotation). Check out the Draggable codepen collection http://codepen.io/collection/AtuHb/ - there are a few examples in there that might apply. OSUblake has done a bunch of demos like that too I believe. Maybe he'll swing by and offer some links :) 

Link to comment
Share on other sites

I can see it working great in the example but it has the feeling of some hack :)

 

maybe I can offer a new feature: a null type, it will make a lot of sense even in the examples you gave instead of using invisible div

actually it will be a good replacement for hammerjs for example.

 

Thanks a lot really appreciate your response.

Link to comment
Share on other sites

I would love a GSAP based gesture tool like hammer.js, but for now you can get most of that functionality from Draggable. And I wouldn't call using invisible div a hack. In fact, I would recommend using that method for most types of Dragging as it's going to give you the most flexibility. You can even use it with canvas.

 

Three.js example

See the Pen kkAGpv by osublake (@osublake) on CodePen

 

Here's a simple example of using rotationY on a dummy element... converting linear motion into rotary motion.

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

.

  • 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.
×
×
  • Create New...