Search the Community
Showing results for tags 'rotation'.
Found 145 results
-
Hello GreenSock, Lately, I've been getting into some projects that combine the Flash display list, the Starling framework, and the Away3D framework. What a crazy mixed up world -- especially when it comes to rotation properties. As a Flash-based Stage3D framework, Away3D "sensibly" defaults to degrees (despite what some of my Unity guys might think of that). However, Starling kinda gums up the proverbial works by hopping to radians for expressions of rotation. Granted, if an AS3 developer is using matrix transforms on a regular basis, radians are going to make some sense. But for most Flash (and GreenSock) users migrating to Starling, this can be a challenge. Perhaps we could register a new plugin that provides "useRadians:true" at the level of simple rotation tweens. I've enjoyed the convenience of "useRadians" on both the ShortRotationPlugin and the BezierPlugin, but when it comes to simple rotations (especially where ShortRotation is not applicable), the only solution I found has been to create custom unit-converting "myRotation" getter/setter on the custom class. What is your suggestion? Maybe I'm missing something obvious, if so please rap my knuckle. Otherwise, might this call for a new plugin? such as... TweenMax.to(myStarlingSprite, 10, {radianRotation:{rotation:Math.PI*2}, repeat:-1, ease:Linear.easeNone}); // rotate the starling sprite '360 degrees' every 10 seconds
-
Hi guys, I've been having a play around with the JS animations for a few weeks now (having loads of fun making stuff fly about the place!) but have decided to notch it up a level and try some 3D animations. Basically I'm trying to rotate a 3D cube around the Y axis and am having an issue getting the 4 front facing sides of the cube to stay where they should be. They sort of 'bounce' from the edge of the cube by a small margin. I've setup a fiddle to help explain the issue for which I've taken out 3 of the cube faces to showcase the issue - http://jsfiddle.net/rockerby/sVTaU/1/ I've tried playing around with the transform origin rather than animating the 'z' and 'x' properties on rotate but can't seem to get this to look right. Any help would be greatly appreciated!
-
Hi, The firefox fix in the current code that addresses a bug in transform could be improved. It changes the top value but if I have an element positioned with bottom it breaks my layout. One fix could be just checking if bottom is set and change the bottom value instead. Code I'm refering to: if (_isFirefox) { //Firefox has a bug that causes transformed elements to randomly disappear during (or after) animation unless a repaint is forced. One way to do this is change "top" by 0.05 which is imperceptible, so we alternate back and forth. Another way is to change the display to "none", read the clientTop, and then revert the display but that is much slower. The bug is present in at least Firefox 17 and 18 top = _getStyle(targ, "top", null, false, "0"); n = parseFloat(top) || 0; sfx = top.substr((n + "").length); t._ffFix = !t._ffFix; targ.style.top = (t._ffFix ? n + 0.05 : n - 0.05) + ((sfx === "") ? "px" : sfx); } Thanks
-
hello there,I've got a problem in my project. I've got 5 button to control an element to rotate. TweenLite.to($("#element"), 1, {css:{rotation:"+="+72*($(this).index("#button div")-num)}}); "num" is the current number of the button. But if i click on one button and click another button quickly,then the first rotate animation hasn't finished and the second one start,so it's not i want. Is there any way to solve my problem? Thx guys,I've been stuck for two days...
-
Hi there, well here comes IE8 ruinning my life (AGAIN). I was working on some rotation effects (I was thrilled with the results by the way), till I have discovered that IE8 does a horrible effect rotating the images. If you don't use position:absolute, the rotation affects the image within the div (If my div is a rectangle of 700 px by 300px) so the size of the rectangle acts like a mask. Plus: IE8 makes a horrible black border on the images that rotates, so ugly that is really hard to look at it, I saw this black horrible border using the alpha effect before, but I said, what the heck!, it's not critical, but this rotation issue really forces me to avoid the effect. All browsers are plain perfect as usual, but if it doesn't work on IE8 properly it's a problem. Sad but true, another jewl ruined by this so called browser. I've tried all combination of positions, but it does seems that the only position that rotates the div as it is expected to be on IE8 is absolute. Hope anyone could give me a hand on this one. Here's a simple example. TweenMax.to($logo,1,{css:{rotation:"360deg"},ease:Expo.easeOut}); http://www.kassandrafoto.com/ (So sorry if it's not allowed to post links, you can delete it any moment) Greetings. PS. ...really depressed till good news. Thanks for your GREAT, GREAT work guys.
-
Hi Greensock 1. Why is 2 movieclips both rotated from -90 to 190 going cw using TweenMax.to and ccw using TweenMax.from? 2. Is there a way to make .from go CW in this example? note: both going cw when var rotateTo <=180 in example below //HippieSvin import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; var rotateTo:Number = 190; var rotateFrom:Number = -90; // CCW // RED : TM animating FROM -90 to 190 var c1:MovieClip = new MovieClip(); this.addChild(c1); c1.x = 275; c1.y = 200; c1.rotation=rotateTo; var red:MovieClip = new boxRed(); c1.addChild(red); red.x=-50; TweenMax.from(c1, 3, { delay:1.0, rotation:rotateFrom, ease:Quad.easeInOut }); // CW // GREEN : TM animating TO 190 from -90 : this goes CW var c2:MovieClip = new MovieClip(); this.addChild(c2); c2.x = 275; c2.y = 200; c2.rotation=rotateFrom; var green:MovieClip = new boxGreen(); c2.addChild(green); green.x=-50; TweenMax.to(c2, 3, { delay:1.0, rotation:rotateTo, ease:Quad.easeInOut });
-
Hi there, GSAPJS does a great job to bring AS posibilities to JS. However there is one thing that seems to be missing - and i might probably be out of scope but i'll go ahead and ask: Is there a convenient way in GSAPJS to easily get values back from the transform property - scaleX, scaleY, RotationX, skewX etc... ? Or do we need to work with the 2D and 3D matrix? Right now I'm using $("selector").data(key, value) to store (set/get) these variable but I was hoping to find a better way of accessing these values in real time. Anyways, here is an example that works fine using $().data() : http://jsfiddle.net/Dqg2n/3/ Thanks for your work, you make coding so conveninent!!
-
Updating rotation values of tweens inside an infinite timeline
Héctor posted a topic in GSAP (Flash)
Hello, I've got this code: leanLeftTween = TweenMax.to(trapecista, 1, { rotation: -10, ease:Linear.easeNone } ); leanRightTween = TweenMax.to(trapecista, 1, { rotation: +10, ease:Linear.easeNone } ); leanBackLTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); leanBackRTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); var tremble:TimelineMax = new TimelineMax( { repeat: -1 } ); tremble.append(leanLeftTween); tremble.append(leanBackLTween); tremble.append(leanRightTween); tremble.append(leanBackRTween); TweenLite.delayedCall(1,updateRotation); } private function updateRotation():void { leanLeftTween.updateTo( { rotation: -30 } ); leanRightTween.updateTo( { rotation: 30 } ); } The rotation values are changed, but the animation seems to jump. I just want to increase/decrease the amplitude of the rotation tween on user interaction (using delayedCall is just to simplify code). Any help? -
This is probably an edge case so it's not a huge deal, but thought I would report this as I spent the past few hours figuring it out... My PhoneGap (Cordova) iPad app allows orientation changing in all four directions. 1 = home button bottom 2 = home button top 3 = home button right 4 = home button left For each orientation I use GSAP to rotate an element so that the top of that element always points to the home button. This worked in all variations except when rotating from 3 or 4 to 1. When rotating to orientation 1 I was using rotation:0 Changing rotation:0 to rotation:360 resolved the issue. Crazy right? Hope that helps someone...
-
Hi, I couldnt find an answer to this on the forums. Appologies if a similar thread exists. I am as my name suggests; new to greensock and flash-programming. Current code is working and moves the "hero" up and down to fixed locations in my game: private function keyPressed(event:KeyboardEvent):void { if (oppnedcount <2 && event.keyCode==38) { if (oppnedcount == 0) { oppnedcount++; TweenLite.to(hero, 0.3, {y:(421)}); } else { oppnedcount++; TweenLite.to(hero, 0.3, {y:(365)}); } } if (oppnedcount > 0 && event.keyCode==40) { if (oppnedcount == 2) { oppnedcount--; TweenLite.to(hero, 0.3, {y:(421)}); } else { oppnedcount--; TweenLite.to(hero, 0.3, {y:(477)}); } } } "Attatched" to the heros X- and Y-pos i have a running particle-object. Is there a way to rotate the angle of this particle-object DURING the tween of my "hero"? Preferrably using the tweenlite-code and not adding a timer to calculate the 0.3 seconds of my tweens. Thanks in advance, best regards
-
Hey all, I understand that TweenMax simulates flash behaviour and always rotates to the nearest point, but I'm having some problems in some ocassions, I'm not exactly sure why... I have a movieclip that has an initial rotation of -161, I want it to rotate to 147. Ok, so with some basic calculations give me the following: A ClockWise ROTATION: - Would take 308 degrees. A CounterClockWise ROTATION: - Would take 51 degrees. However, when I rotate the movieclip it rotates ClockWise direction, which would take longer. What am I missing here? What I did: Placed a movieclip on canvas, set the rotation to -161 and then call this: TweenMax.to(arrow, 1, { rotation:147 }); Many thanks in advance.
-
Hey guys, I've been a long-time user of the Greensock platform, however I am having trouble getting the desired effect in Javascript. The issue is a follows: I have a prize wheel (a la wheel of fortune) which has 16 parts. The user clicks a button to spin the wheel and the wheel spins for a set duration (to match a sound effect). The landing (prize) location of the rotation is determined by the server and that all works. While I can get the wheel to land at the proper, pre-determined, positions, I can't get it to do so smoothly. My poor attempt is below. Now I know this is not the proper way to do it for the obvious reason, it is not a smooth motion, but it's a close as I could get to the effect I need. What I want is since i know the destination rotational value, I want to have the wheel spin (ease in to full speed, rotate X amount of times, then slowly ease out [decelerate] to the desired rotation). The question remains, how the heck can I do this? Any help would be much appreciated. var tl = new TimelineMax(); tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:360}, ease:Quad.easeIn}) ); tl.append( TweenMax.to($('#wheel'), .75, {css:{rotation:360}, ease:Linear.easeNone, repeat:10, yoyo:false}) ); tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:data.degrees}, ease:Sine.easeOut}) );
-
Hi, First - thanks so much for making this javascript framework! I've been trying to get an animation going in IE7/8 that I got to work on all other browsers using your framework, but it doesn't function properly in those browsers. You can see it in action here: http://neu14.com/transitions/print/index2.html I'm also attaching my files -> see index2.html (that one uses greensock). Thanks for any thoughts! Pol PS: I'm unclear if I need the CSS plugin for rotation or opacity or not since they both can be numeric? (I used it, but not sure if it was needed) animation.zip -
Hi all I am using the throwprops tween and want I want to achieve is that when the dial is spinned that it ease out to the closes segment of my dial on the 12 o clock position that is in 30 deg segments. Then also if I just press on the 3 o clock segment it should rotate to the 12 o clock position. Is this possible with the throwprops tween? Any help would be highly appriciated. -
I have had no luck getting an element to rotate, or take any transform properties, below IE9. I see documentation all over the place stating that the code works but I haven't seen a working example and can't get it to work on my own. I've tried using the CSSPlugin and the RaphelPlugin. Both with no luck and unfortunatly no errors in the wonderful ie debugger. A working example would be great if anyone has a link to one.
-
Hi there, i'm about to switch to Starling Framework for my new projects. For a game i animated an object with autorotate=true like this so far (simplified): points = [new Point(50, 35), new Point(500, 35), new Point(500, 300)]; path = new LinePath2D(points); var f:PathFollower = path.addFollower(object, 0, true, 90); tween = TweenMax.to(f, time, {progress: 1, onUpdate:onUpdateTween, ease:Linear.easeNone}); The object started with an initial rotation of 90° to the right and after reaching the 2nd point it was rotated again by 90° for reaching the final point. Now with Starling the same approach doesn't work anymore, since there rotations are calculated using radians. Therefore the rotation at point 2 will not look correctly anymore: points = [new Point(50, 35), new Point(500, 35), new Point(500, 300)]; path = new LinePath2D(points); var f:PathFollower = path.addFollower(object, 0, true, deg2rad(90)); // this allows the initial rotation tween = TweenMax.to(f, time, {progress: 1, onUpdate:onUpdateTween, ease:Linear.easeNone}); Is there a way how rotation can be handled correctly for a Starling Image/Sprite object with Greensock ? Btw. how can a LinePath2D object be added to a Starling Sprite ? At the moment i get the error "Implicit coercion of a value of type com.greensock.motionPaths:LinePath2D to an unrelated type starling.display:DisplayObject." Thank you for your help. Bests valley
-
I'll spare the kudos for now, but seriously, you guys rock! I think there is an issue/bug with Android and rotation. But there is an exception which is baffling me... TweenMax.min.js version: beta 1.33 (also tried 1.29) Motorola Atrix - Android 2.3.6 Droid 2 - Not sure what version Android You can view the issue using examples in the Greensock JS zip file... greensock-v12-js/examples/falling_text.html - The letters do not rotate on Android (two devices) greensock-v12-js/examples/super_basic_syntax.html - Near the end, the divs should rotate. Doesn't work on Android. I even set up a bare bones example and it didn't work. However, The Snorkl.tv Peacock example does work. I tried copying his code and TweenMax (1.29) but it doesn't work for me. It only works on his site??? Really strange but thought you should know. Let me know if I can help troubleshoot this any further. Thanks!
-
Hello, I have the following code: $(document).live('keydown',function(event){ var key = event.keyCode; if(key==39){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left+40}}); } else if(key==37){ TweenMax.to($("#hero"),0.1,{css:{'left':$("#hero").position().left-40}}); } else if(key==38){ TweenMax.to($("#hero"),0.3,{css:{'rotation':-30}}); TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top-10}}); TweenMax.to($("#hero"),0.6,{css:{'rotation':0}}); } else if(key==40){ TweenMax.to($("#hero"),0.1,{css:{'top':$("#hero").position().top+10,'rotation':30},onComplete:function(){ TweenMax.to($("#hero"),0.1,{css:{'rotation':0}}); }}); } }); What this does is to read the "arrow" keys from the keyboard and move the element (hero) up/down/left/right However when pressing the down button continually, the element goes up instead of down, it does not do that when there is no rotation however. For some reason rotating the object gives it wrong .position().top value. It used to mess up moving upwards too, but I solved it by resetting the rotation to 0 after the animation (still its a workaround though). Anyone knows why is this happening? Or how it could be solved/worked around? You can view this here: http://www.netgfx.com/trunk/scrollingBG/ Thanks in advance. -
Hi, here is one I hope simple problem. I`m using tweenlite to simple rotate some stuff and then to trigger some sound when wheel reach a certain position: TweenLite.to(_myWheel, _speed, {rotation:_suspension + (_pieIndex * _pieAngle), immediateRender:true, useFrames:false, ease:easeFunct, onUpdate:playTickSound }); private function playTickSound ():void { trace (Math.round(_myWheel.rotation)); _isWhole = (Math.round(_myWheel.rotation) / Math.round(_pieAngle)) % 1 == 0; if (_isWhole) playSimpleSound(); } To exactly calculate _isWhole = true, I need to have Math.round(_myWheel.rotation) exact position every time when onUpdate occurs. Anyways, for some reason I don`t get those info right, so here is what I get when I try to trace it: trace (Math.round(myWheel.rotation)); 139 156 171 -176 -162 -144 -130 -119 -109 -98 -88 -78 -67 -54 -42 -30 -19 -9 1 11 21 30 39 51 63 76 86 95 103 111 118 126 135 143 150 157 165 172 179 -174 -168 -162 -155 -148 -140 -133 -127 -121 -116 -110 -104 -99 -93 -87 -81 -76 -70 -65 -61 -57 -52 -48 -43 -39 -34 -30 -27 -23 -20 -17 -14 -11 -8 -5 -2 0 2 4 5 7 9 11 12 14 15 16 17 18 19 20 21 21 22 22 22 23 -
I searched around the forums but could not find any post that could help me so my apologies if it has been answered before. Basically I have a clock type arm that spins to different positions depending on what the user selects. It spins just like a clock arm, its pivot being at the end of the arm. Everything works fine except that the arm should only rotate clockwise, never counter-clockwise. So on some values the user selects the arm spins in the opposite direction, sometimes oddly enough even if the opposite direction is not the closest distance it will still spin that way. I just need to always force it to spin clockwise no matter the value. Is there any way I can do this? Let me know thanks.
