Jump to content
GreenSock

Search the Community

Showing results for tags 'Rotation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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.
  2. 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 });
  3. 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!!
  4. 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?
  5. 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...
  6. 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
  7. 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.
  8. 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}) );
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. 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!
  14. 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.
  15. 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
  16. 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.
×