Jump to content
GreenSock

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

Draggable, move, scale, rotate

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

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 ?

 

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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. :)

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