Jump to content
GreenSock

mcspud

Members
  • Posts

    3
  • Joined

  • Last visited

mcspud's Achievements

1

Reputation

  1. All solved using the data attribute each DOM element and a reference to it for each call. Thanks for your time.
  2. Thanks for the fast reply, I'm very impressed. I tried to leave out specifics for this question to make it more generally accessible to other users, but I'll elaborate on my intent. I want to create a wheel based navigation menu. This menu has the position:fixed attribute. The HTML looks something like this: <ul class="nav"> <li><div class="item"></div></li> <li><div class="item"></div></li> <li><div class="item"></div></li> <li><div class="item"></div></li> <li><div class="item"></div></li> </ul> The CSS for the ul.nav element is similar to the following: ul.nav { position: fixed; top: 35%; left:0%; } Straight away its apparent that only the "right half" of the list will be visible. Each <li> elements child div is only 30% of its parents width, with the other 70% a left-margin. This gives me a nice radial offset and lets me properly spiral the elements around a fixed point. The idea is that the li elements initially fan out (this works) On a given user action, they rotate out of the screen (to the hidden "left" side) bar the element that is bound to the event. Using the "compass" in post 1, the easy solution would be to set the angle of rotation to 270*. The other, more verbose way, is to use each elements current position and index value to calculate the required rotation; however if this ability existed I didn't want to duplicate it. I only picked up GS an hour or two ago, so apologies if this question is stupid. Once again, thanks for the incredibly rapid response. Regards, Jamie.
  3. Hi guys, For a first post I want to thank Jack and co for producing a great product. The api and methods are very straight forward and quite elegant. Now onto the question: Is there a way to rotate an element to a specific/global angle? So far all of my tests have (seemingly) rotated the element in question to an arc relative to its current position. Assume our scale is degrees, and "up" is 0 with increments added from clockwise rotation (to 360 obviously): var rotateMe[0] = document.getElementById( "div1" ); var rotateMe[1] = document.getElementById( "div2" ); var rotateMe[2] = document.getElementById( "div3" ); or more easily: var $rotateMe = $( "div.rotateMe" ); The initial script: for( i = 0; i < $rotateMe.length; i++) { TweenLite.to($rotateMe[i], 1, {rotation: ( 45 * i ), transformOrigin:"left 50%"}); } This produces a nice "fan" effect of elements, all with a different offset angle. If I now want to rotate ALL elements to a specified position (lets say 270* using the above "compass") how would I go about this? One solution is to create an equation within another loop that references the elements index number and calculates appropriately, but this seems overly verbose. I've had a search for a previous question like this but I couldn't find anything close (although my terms may be off). If this helps all elements are absolutely positioned so they stack appropriately on top of each other (or I can pass a z-index attribute if needed). Thanks
×