# Draggable rotate is not accurate or consistent

Go to solution Solved by Carl,

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:

Thanks.

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

##### Share on other sites

Hello jetchy, and Welcome to the GreenSock forum!

##### 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:

```console.clear();
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', {
type:'rotation',
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.

http://codepen.io/GreenSock/pen/PzLzoJ/?editors=1011

percentToRange from Chrysto / Bassta

http://bassta.bg/category/snippets/page/2/

• 4
##### 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;
}```

http://snipplr.com/view/65580/as3-map-a-number-within-one-range-to-another-range/

Converted to JS it would be used like this:

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

http://codepen.io/GreenSock/pen/NRoVWB?editors=0011

• 3
##### Share on other sites

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

##### Share on other sites

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

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

http://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64150

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.

• 3
##### Share on other sites

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