[Random rotation but at 72 degree intervals]

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

 

Sorry for wasting your time!!

 

And thanks so much!

[Random rotation but at 72 degree intervals]

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";
		
pie.onload = function(){
	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!!

[Random rotation but at 72 degree intervals]

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

[Any Firefox functionality issues for on-load animation?]

Ah yes - I think that should do it. It's just kind of jerky and the motion skips in Firefox, but pre-loading the image should hopefully resolve the issue.

 

Thanks again!

[Any Firefox functionality issues for on-load animation?]

I have another question, and it might be something I'm doing wrong - but my on-load rotation works perfectly in chrome and safari, but does not work in Firefox. My on-click rotation works in all three.

 

Is there a known firefox issue? Or do I need to use a different syntax to run the animation on page load in all browsers?

 

Thanks!

See the Pen ogbNaj by anon (@anon) on CodePen

[rotation by degrees - counterclockwise not functioning as expected]

Thank you!! You are a lifesaver!

[rotation by degrees - counterclockwise not functioning as expected]

Hi there:

 

I think I'm doing something wrong in CodePen, since my example is not functioning - but the code I'm using is in there.

 

Here's a link to view what I've got going on:

http://bluetabby.com/rr/index17.html

 

I want the pie wheel to spin on load (preferably a random multiple of 72 degrees between 5 and 10 but I haven't gotten that far yet) and then advance by 72 degrees clockwise with right arrow click, and reverse counterclockwise by 72 degrees on left arrow click.

 

Everything is more or less working except that my counterclockwise reverse rotation seems to be going about 216 degrees and not 72. I basically need the pie to advance one slice in each direction depending on which arrow you click.

 

Anyone know what I'm doing wrong?

 

FYI - just discovered Greensock tonight - and so far its amazing! But I'm still struggling to understand some of the functionality and syntax.

 

Thanks!!

See the Pen ogbNaj by anon (@anon) on CodePen