# Random rotation but at 72 degree intervals

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

OK, I hope I can explain this.

Right now I have this code:

```pie.onload = function(){
//spin from 0 to 360
TweenMax.to('#wheel', 7, {delay:1, directionalRotation:"+=648_cw", ease:Power4.easeInOut, duration:5});
};
```

This spins a 5 piece pie graphic, but always lands on the same pie piece.

What I need to do it have the pie spin but land on a different pie piece each time. Would I do random() function * +=72? I'm having trouble wrapping my head around this for some reason!

Ugly looking site is here: http://bluetabby.com/rrevents/

Thanks!!

##### Share on other sites

In the code below the basic idea is that we pick a number between 6 and 10 and then multiply that number by 72.

This will guarantee random increment of 72 and insure the pie spins around at least once landing on one of these values:

432
504
576
648
720
```pie.onload = function(){
var myRotation = randomNumber(1,6) * 72;
trace(myRotation);
TweenMax.to('#wheel', 7, {delay:1, directionalRotation:randomNumber + "_cw", ease:Power4.easeInOut, duration:5});
};

function randomNumber(min:Number, max:Number):Number {
return Math.floor(Math.random() * (1 + max - min) + min);
}```
##### Share on other sites

Thank you!

I can't get it to work yet, but I'm understanding the concept better.

I tried making a few changes, thinking maybe it just needed the myRotation variable instead of the randomNumber variable in the Tween code. And I tried adding in the "+=" also - neither one helped at all so I'm guessing those things were not the issue! Can you tell what's wrong with the below?

```pie.onload = function(){
var myRotation = randomNumber(1,6) * 72;
trace(myRotation);
TweenMax.to('#wheel', 7, {delay:1, directionalRotation:"+=" + myRotation + "_cw", ease:Power4.easeInOut, duration:5});
};

function randomNumber(min:Number, max:Number):Number {
return Math.floor(Math.random() * (1 + max - min) + min);
}
```

ETA:

I made some more changes based on the GSAP docs - I feel like this SHOULD be working now - but its not:

```jQuery(document).ready(function() {

var pie = new Image();
pie.src = "pie.png";

function randomNumber(min:Number, max:Number):Number {
//good
return Math.floor(Math.random() * (1 + max - min) + min);
}
var myRotation = randomNumber(7,11) * 72;
trace(myRotation);

TweenMax.to('#wheel', 7, {delay:1, directionalRotation: (myRotation + "_cw"), ease:Power4.easeInOut});
};

jQuery("#rightarrow").on('click', function(){
TweenMax.to('#wheel', 1, {directionalRotation:"+=72_cw", ease:Back.easeOut});
});
jQuery("#leftarrow").on('click', function(){
TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw", ease:Back.easeOut});
});
});

```

Any pointers will be greatly appreciated!!

Edited by Haikukitty
##### Share on other sites

• Solution

oh, I assumed you were using ActionScript because you posted in our Flash forum.

(don't worry its no big deal).

What I gave you should have caused a few errors in your console.

```var myRotation = randomNumber(6,10) * 72;

TweenMax.to('svg', 4, {delay:1, directionalRotation:"+=" + myRotation + "_cw", ease:Power4.easeInOut, duration:2});

function randomNumber(min, max) {
return Math.floor(Math.random() * (1 + max - min) + min);
}```

http://codepen.io/GreenSock/pen/ZGYoaj?editors=001

Just hit the run button to see the page reload and a new random rotation get used.

here is some info on how to do create a CodePen demo (for future reference) http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

I'm going to move this to the HTML5 / JS forum.

• 2
##### Share on other sites

Oops - sorry! I think I just click to ask from where I was reading another answer.

And thanks so much!

##### Share on other sites

no need to apologize. happy to help.