Jump to content


Draggable rotate is not accurate or consistent

Go to solution Solved by Carl,

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'm using the Greenscok Draggable as a themostat. The temperature increases or decrease at every 18 degrees rotation (also based on clockwise or counter-clockwise).


I'm grabbing the rotation and using the remainder operator (%) and if it is equal to 0, the temperature changes.

With the dial at 0 (rotation), the temperature is at 18 and at -180 (rotation), the dial should reach 26 degrees. However, the rotation and the temperature don't seem to be working in unison.


Just to add, the temperature should be at 22 degrees at -90 (rotation).


Here is the codepen:




See the Pen EgAdgP by jetchy (@jetchy) on CodePen

Link to comment
Share on other sites

Hello jetchy, and Welcome to the GreenSock forum!

Thank you for the example, very helpful .. please standby while we test your codepen!


Link to comment
Share on other sites

  • Solution

Yeah, I think something is amiss in your logic. Instead of trying to debug what you were doing I took another approach which should get you the desired results:


var output = document.getElementById('output');
var temp = document.getElementById('temperature');
var previousRotation = 0;

//from Blake
function normalize(value, min, max) {
  return (value - min) / (max - min);

//from Chrysto
function percentToRange(percent, min, max) {
   return((max - min) * percent + min);

Draggable.create('#dial', {
    throwProps: true,
    bounds: {
        minRotation: 0,
        maxRotation: -180
    onDrag: function(){
       var normalized = normalize(this.rotation, 0, -180);
       var mapped = percentToRange(normalized, 18, 26);
       console.log(this.rotation, normalized, mapped, this.getDirection());
       temp.innerHTML = parseInt(mapped);
I removed the counterclockwise vs clockwise detection as Draggable already provides a getDirection() method :) please see console logs when you drag.



more info on normalizing and clamping (from OSUBlake)



percentToRange from Chrysto / Bassta


  • Like 4
Link to comment
Share on other sites

Another option


I remembered this old AS3 function called map() that basically combines the normalize and percentToRange functions:


public static function map(num:Number, min1:Number, max1:Number, min2:Number, max2:Number, round:Boolean = false, constrainMin:Boolean = true, constrainMax:Boolean = true):Number
if (constrainMin && num < min1) return min2;
if (constrainMax && num > max1) return max2;

var num1:Number = (num - min1) / (max1 - min1);
var num2:Number = (num1 * (max2 - min2)) + min2;
if (round) return Math.round(num2);
return num2;



Converted to JS it would be used like this:


onDrag: function(){
       temp.innerHTML = map(this.rotation, 0, -180, 18, 26, true);



  • Like 3
Link to comment
Share on other sites

Thank you for the feedback. Both answers seem to work very well.


Your help is much appreciated. :)

Link to comment
Share on other sites

more info on normalizing and clamping (from OSUBlake)

See the Pen ?editors=1011 by GreenSock (@GreenSock) on CodePen



I guess you didn't see my last post from that thread.



I had a demo on there showing how to map values to Draggable...

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


I just looked at Chrysto's site. The functions he posted are actually the same ones I posted. percentToRange is lerp (linear interpolation), rangeToPercent is normalize, and right below those he had a bounds function, which does the same thing as clamp.

  • Like 3
Link to comment
Share on other sites

Thanks Blake. I couldn't find that post only the pen I had.

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.