Jump to content
GreenSock

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

Control timeline through Rotation Draggable

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 All!

 

So I'm trying to use a Rotation Draggable to control a timeline. I found this topic: http://greensock.com/forums/topic/8842-draggable-parallax-effects-in-edge-animate/but it's for a linear draggable. I tried imputting that code and changing a few things around to make it work with rotation, but I'm afraid my coding capabilities are woefully underdeveloped.

 

If anyone could help out, I'd greatly appreciate it!

 

-mlovett

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

This is actually quite simple. All you have to do is to create a Draggable instance and add an onDrag callback, using that callback and the Draggable's angle you can set a number between 0 and 1, and with that number you can control the progress of another GSAP instance (Tween or Timeline), like this:

// assuming that the HTML markup has two elements in it, one that rotates
// and another that has a tween

var knob = $("#knob"),// element that rotates
    target = $("#target"),// element that has the tween
    t = TweenLite.to(target, 2, {x:300, y:300, backgroundColor:"#FF00FF", paused:true, ease:Linear.easeNone});

Draggable.create(knob,{
  type:"rotation",
  bounds:{minRotation:0, maxRotation:360},
  onDrag:function(){
   // we transform the number so it goes between 0 and 1 and apply it to the
   // tween's progress() method
   t.progress( this.rotation/360 );
  }
});

I set up a codepen so you can see it live:

 

See the Pen OPWKwP by rhernando (@rhernando) on CodePen

 

Feel free to fork and adapt it to your needs.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Wow, thanks! That's perfect! I actually just figured it out myself (such a gratifying feeling) but I am definitely going to look over your code and see how I could use it. I really appreciate your help!

 

-mlovett

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