Rotate element by dynamic amount

Hi richtelford, yes- you can dynamically rotate an object using css, like this:

var your_angle = 50;

sym.$("your_wheel").css('transform','rotate(' + your_angle + 'deg)');

sym.$("your_wheel").css('-moz-transform','rotate(' + your_angle + 'deg)');

sym.$("your_wheel").css('-webkit-transform','rotate(' + your_angle + 'deg)');

sym.$("your_wheel").css('-o-transform','rotate(' + your_angle + 'deg)');

Brilliant Tim!

Hey richtelford, the code I supplied just sets the rotation once.

In order to animate a rotation, 2 options come to mind:

1. use setInterval to repeatedly call a "rotate" function, (containing the code I gave you), increase the "your_angle" var at each function call.

2. use jQuery animate. This is a hacky trick that uses the "step" method in the jQuery "animate" method. "Step" is repeatedly called at each step of the animation. I'm animating an arbitrary property "bottom", which doesn't affect this object. Put the code below in the Stage/compositionReady event. Here's where I got this hack: http://jsfiddle.net/39pe6/

sym.$( "your_symbol" ).animate({"bottom": "200px"},

{

          duration: 5000,

   step: function( now, fx ){

      sym.$("your_symbol").css ({"-moz-transform":"rotate("+now+"deg)",

                  "-webkit-transform":"rotate("+now+"deg)",

                  "-ms-transform":"rotate("+now+"deg)",

                  "-o-transform":"rotate("+now+"deg)"});

            }

},'linear');

Hey richtelford. Ya, Edge doesn't have a built-in dynamic rotation animation feature. In fact, it doesn't have dynamic animation features at all (Flash doesn't either though ...). Right now, Edge is focused on timeline-based animation. As you know, you can leverage javascript to extend Edge's capabilities.

"What would be the advantage of doing this in Edge", you ask? For me, the biggest advantage of Edge, over doing everything through straight JS, is the WYSIWYG layout capabilities, and the ability to nest symbols to create complex animations and interactions. You can lay out your graphics right there on the stage in Edge, and really see what's going on. I use Edge kinda like how I use Flash- I lay out all my graphics on the stage, but I do most of the funcitonality through code.

Not to detract from Edge, but TweenMax js (GSAP) is extremely cool too. You should be able to import that library, and tween dynamic rotations to your heart's content, while still getting the benefits of the Edge interface.

Just spitballin' here, but what if he were to make his gear animate over 360 frames. He could then pass the degree of rotation he wanted to go to finalRotation=r. And then use sym.stop(r);

@Jerry, yea he could rotate on the timeline, and then use sym.stop(r), though he would still need a setInterval to actually animate to the appropriate angle. At that point, he might as well rotate through code.

@richtelford: in my opinion, you should use the jQuery animate method, and the step hack, which I posted above. It's smooth, and easy. And, yes indeed, Edge runs on javascript, so most anything you can do in javascript you can do in Edge. So when you're looking for how to do stuff in Edge, just do a search on how to do it in javascript.

Right on, no problem Rich! If you want to mark my post with the jQuery animate solution as "correct", it will help other folks who are looking for the solution to the same question.

Cheers!

Hi Tim,

I'm trying to do something similar and have seen your posts on a number of rotation-related posts and have tried them all. Problem is, I can't get any of the .css('transform','rotate([foo]deg)'); patterns to work.

For example, this will animate the opacity of the symbol, but not the rotation (I'm using Safari):

sym.$('bar1').animate({

                    opacity:0.25,

                    '-webkit-transform': 'rotate(45deg)'

          }, 500, function() {

});

Trying to debug it, I simplified your non-animated example above, and not even that will work:

sym.$('bar1').css('-webkit-transform','rotate(45deg)');

I assume there's something really dumb I'm missing but I cannot figure out what it is. Any ideas? Thanks!

Hi Jay,

The problem is, you cannot directly manipulate the rotation property with the jQuery "animate" method. So in my example, I used the "step" property to call the rotation at every "step" of the tween. I mentioned this here:

This is a hacky trick that uses the "step" method in the jQuery "animate" method. "Step" is repeatedly called at each step of the animation. I'm animating an arbitrary property "bottom", which doesn't affect this object.

In the second static example, you're missing several things. You put a comma where there should be a colon. You also need to put the items in an object, between curly braces, {}. Your second, static  example should be this:

sym.$("bar1").css ({"-webkit-transform":"rotate(45deg)"});

HOWEVER, I would highly recommend tossing the jQuery animate method, and instead looking into the GSAP animation library. This library will change your life. You will become a titan among men if you master the GSAP library, along with Edge Animate.

Below is an example of rotating a div and changing it's alpha using GSAP. It's so simple- the library takes care of all the different browser prefixes, etc.

Example:

www.timjaramillo.com/code/edge/gsap_rotate

Source:

www.timjaramillo.com/code/edge/_source/gsap_rotate.zip

GSAP info:

http://www.greensock.com/get-started-js/

Code on Stage.CompositionReady:

// use yepnope to load the greensock libs

yepnope(

{

nope:[

          'greensock/TweenMax.min.js',

          'greensock/easing/EasePack.min.js',

          'greensock/plugins/CSSPlugin.min.js',

          'greensock/plugins/ColorPropsPlugin.min.js'

],

complete: init

}

);

//when yepnope has loaded everything execute init();

function init (){

     // assuming you have a symbol named "Rectangle" at Stage root

     var RectangleSymbol = sym.$("Rectangle");

     TweenMax.to(RectangleSymbol, 1, {rotation:45, opacity:0.7, ease:Bounce.easeOut});

}

Thanks, Tim. I think I picked up that comma syntax from a JQuery example, though that one uses step too. Still can't get that static code to work even as you wrote it, but the step function works great.

I will definitely check out GSAP. Thanks!

Jay- can you post your file (if you want help with the static rotation)?

Rich- the rotating gears look great!

Sure, I'd be curious what I'm doing wrong. It's a super basic test file, just one symbol and one line of code:

https://www.dropbox.com/s/zbqvmzsg83z8n8o/test.an

Hey jay, in order for me to open the file, I need all dependent js files, not just the .an.

Zip up the whole folder that contains the .an, all the .js files, etc.

Oops, here you go: https://www.dropbox.com/s/42x4gcb11pr0vhf/test.zip

Hey Jay, the zip is missing the test.html file. Can you add it and upload again?

updated

Hey Jay, it looks like the CSS rotation prop doesn't work directly on an Edge symbol- you need to target a simple div shape. In your case you would need to do this:

sym.getSymbol("bar1").$('Rectangle').css ({"-webkit-transform":"rotate(45deg)"});

Yet another reason to use GSAP!

At least I wasn't completely crazy. Thanks Tim!