Draggable, move, scale, rotate

[NicolasJ]

Hello,

 

Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ?

 

This is a general question but I did not really find an answer on the forum. 

 

Before leaving for prototyping I'm not sure this is possible. 

Is someone has any feedback on this point ?

 

[Jonathan]

Hello NicolasJ..

 

Basically GSAP can animate any object and property.. so all you need to do is setup your page so it can accept multi-touch events using hammer.js or some other JavaScript that will add the events for muti-touch events.

 

Then its just a matter of adding your GSAP code inside those event callbacks to animate what you want

 

hammer.js - A javascript library for multi-touch gestures:

http://eightmedia.github.io/hammer.js/

 

Once you have the support for mutli-touch events, than you can let GSAP do all the heavy lifting of transforms (scale,rotate, translate), with its ease of use.

 

Hope this helps!

[NicolasJ]

Hello Jonathan,

 

thanks for your answer.

this is actually what I'm gone. 

 

Suddenly comes another question, what should I use in GSAP? 

I went on ThrowPropsPlugin, is this a good idea?

[Jonathan]

That really depends on what your doing..

 

You could include just Draggable and TweenMax, which includes all the goodies like TweenLite, TimelineMax, TimelineLite, CSSPlugin, EasiingPlugin and so much more...

 

Or if your trying to cut down on the file size of your page, then you can include GSAP scripts separately.  Like including TweenLite, CSSPlugin, Draggable Plugin, and ThrowProps Plugin in separate scripts.

 

Check out the

See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

. (if you look in the JS panel, and click the gear icon, you will see the scripts used in the demo"

 

Please note though that the ThrowProps Plugin is for Club GreenSock Members ('Shockingly Green' and 'Business Green' levels).

 

Read this for more info regarding how to get ThrowPropsPlugin.. it's taken from bottom of the Draggable demo page:

 

Draggable is what handles all of the actual dragging and user interaction and it can be used without ThrowPropsPlugin if you don't need the momentum-based animation. It's a very useful tool on its own. However, to get the slick animation after the mouse is released (or touch ends), you'll need to load ThrowPropsPlugin which is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible.

 

Hope this helps.

[NicolasJ]

Thanks, for your answers.