Jump to content


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!



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});

  bounds:{minRotation:0, maxRotation:360},
   // 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.



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



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.