madfatter

Once the circle gets to the position, there would be a pause and then the rotation would resume from that point. If the rotator used the shortest possible route that would be great but I think that may be too ambitious for me. To tween the timeline to the clicked icon would I pause, seek and resume? Or reverse the timeline? I'm still familiarizing myself with what's possible. Loading the text blocks as functions seems like a good idea. Thanks!

I've managed to get it this far: What I want to achieve is when an icon is clicked everything stops and the clicked icon goes to the top (or the rotator fades out and when it fades in the icon is at the top ) and the appropriate box slides in and after the delay the rotation continues. But I can't get things to stop and I think it's because I'm calling spinMe() at the end of spinMe(). I was wondering if I recreated the rotator as a timeline in an infinite loop with timeline labels for each icon. Then paused the timeline when the icon was clicked and then resumed at the appropriate label - would that be possible a way to do this? I just want to avoid rebuilding it in that fashion and then discovering that it was a bad idea. Thanks for any advice

@PointC Thanks! That's great. I can use all the help I can get. I have to figure out which icon is currently at the top and make it "active" in the css and things like that as well as trigger tweens from the side for a corresponding text box for each icon. I know I'll need some click events and onStart calls but I'm still figuring out the best way to deal with it all. What you've provided is really helpful.

Thanks @PointC That's incredibly useful. I now have to add some interactivity, which hopefully I can figure out myself. But if I continue to mess it up I'll likely be seeking some more advice Thanks again!

Hi, Thanks for the code. I've tried it with the my own html but I can't get it to continue to rotate past the first 60 degrees. It moves 60 degrees and then it jumps back to 0 and moves 60 degrees again. Here's my codepen attempt: I figure that I have to adjust the variables after each repeat but I'm not certain how. Any advice would be greatly appreciated. Thanks!

That certainly helps me get the ball rolling. I'll probably be back with some questions once I've had a chance to go over everything. Thanks @PointC and @mikel !

Hi, I'm looking into solutions on how to create a rotating icon and text circle like the one on this page http://www.autotask.com/solutions/endpoint-management As it rotates the text in the centre changes and when an icon is clicked it goes to the top and it's corresponding text is shown. Is this something that I could do with GreenSock? If so, does anyone know of any tutorials that might point me in the right direction? I used to use GreenSock years ago with ActionScript but using it with JS is new to me. Any advice would be greatly appreciated. Thanks!

I'm pretty sure that the problem is that by pressing the skip button I'm leaving tweens in mid stream and the objects that they're tweening are no longer in the current frame. Am I right to assume that to use TweenMax.killTweensOf() I'd put the name of the movie clip being tweened as the parameter? Thanks so much for your help!

Hi, I've got an intro animation playing in frame one of my movie with a "skip intro" button that takes you to the next frame. The intro uses a series on TweenMax tweens and when I click the skip intro I'm often encountering this sort of error: What's the best way to tell TweenMax to stop everything in that frame before moving to the next frame? Thanks for any advice.