Jump to content
GreenSock

mcspud

Rotating to specific point

Warning: Please note

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

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

Link to comment
Share on other sites

Welcome to the forums, mcspud. Nice to hear you're enjoying GSAP thus far. 

 

2 options come to mind for your particular challenge:

  1. Just put your elements into a container, and rotate the container. That'll cause all the children to rotate together and it keeps things very tidy and manageable in an intuitive way. 
  2. You can use relative values for your tweens. So, for example, after you set up all your rotations just the way you like (in the fanned manner), if you want to rotate them all by 20 degrees, you could do: 
    TweenLite.to([your_elements], 1, {rotation:"+=20"});

 

Does that help? Or did I misunderstand your question?

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi,

 

Take a look at this codepens:

See the Pen vloIj by rhernando (@rhernando) on CodePen

 

See the Pen fAcpF by rhernando (@rhernando) on CodePen

 

In this cases like Jack said all you need is change the specific rotation to a relative one.

 

If you need please fork the codepens and play with them or create one of your own in order to get a better grasp of what you're trying to achieve.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

All solved using the data attribute each DOM element and a reference to it for each call.

 

Thanks for your time.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×