Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Cefn

    Tweening HSL color

    Hi all. GSAP is a great framework, really enjoying using it. However I'm struggling to get Hue tweening using HSL within the Color plugin (via CSS automatic binding). A terse attempt to set a background box which tweens its color slowly through the color wheel is as below, but no change seems to happen. TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); TweenMax.to(".wash",60,{backgroundColor:"hsl(+360_cw,50%,50%)",repeat:-1,yoyo:true,ease:Linear.easeNone}); If I remove the 'set' line, then there are some tweened changes to color, (visible in real time within Chrome when the element is selected) but they don't seem to visit the whole 360 degrees of the color wheel. Can anyone help tell me how this is meant to be specified or is a bug/missing feature with respect to degrees in HSL? For now I have the following kludge in place, but I don't like it much as I think something like the simpler syntax should work... TweenMax.set(".wash",{backgroundColor:"hsl(0,50%,50%)"}); var washTl = new TimelineLite(); washTl.to(".wash",10,{backgroundColor:"hsl(120,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(240,50%,50%)",ease:Linear.easeNone}); washTl.to(".wash",10,{backgroundColor:"hsl(360,50%,50%)",ease:Linear.easeNone}); washTl.yoyo = true; washTl.repeat = -1; washTl.play();
  2. jlo

    Null Target Error

    Hey GS guys, Been using the GS platform for a bit now, loving it, but lately I keep running into the "cannot Tween a null target" error, and for the life of me I can't find what's causing it. I've been trying to do a simple rotation on an image but it's stuck on this error. I created a new page to show what I mean, stripped back everything in the project to its basics so I could nut out the problem, here's a link: http://webslinger.com.au/greensock_test/index.html Apologies in advance if this has been answered already, I had a search through other posts and articles and I know this topic has been covered a little (mostly in AS forums though) but I haven't been able to find a solution as yet. Knowing my luck it'll be something really small and obvious too. Cheers, jlo
  3. Hi, I am trying to create a smooth scroll effect: I have a wall that moves horizontally, and I am using 3 pieces with the old-school method. While shifting the wall rotates from x to y degrees. The result is ok, but I want to maximize performances: can I use BlitMask to create a shifting+rotating wall? Is it correct to create the BlitMask for an item, add the item to a DisplayObject, and rotate the DisplayObject? It seems to work ok, even if there is a minor glitch on the top side of the wall, showing the lowest pixels of the wall BMP and certain angles of the rotation (fixable with wrapOffsetY I suppose). Thanks
  4. Hi good people of the forum. I'm trying to animate an opening gift box with the lid popping of and the sides folding down. I was able to do a draft concept using shape tweens in Flash itself after struggling like hell trying to do it with TweenMax. (attached is the swf) I'm fairly familiar with TweenMax / TimelineMax. Something like TweenMax.to(mc, 2, {rotationY:90}) is easy but I quickly run into issues as far as the anchoring points go especially when it comes to the skewed sides. Anybody got some great ideas to get me going? Cheers gift box.zip
  5. Hello, I do not have any real internet explorer 8, just the compatibility mode of IE10 on a Windows 7. I saw on the forum that it could have some issues with the compatibility mode. Thus, I wonder if someone could confirm or not that this example below works on a real IE8 (and IE7 if possible) The problem I have is that the rotation does not work. There is strange behavior. <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=1000" /> <title>ROTATION</title> <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}#box {position: absolute;}</style> </head> <body> <button id="rotate">rotate</button> <div id="box"><img src="http://www.snorkl.tv/images/crab.png"></div> <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script> <script> $(function() { $("#rotate").on("click", function() { TweenLite.to("#box", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut }); }); }); </script> </body> </html> Best
  6. Hey, I seem to have an issue with tween lite rotation. when applying rotation:180 to a div. The tween works once. after resetting the css of the div I apply rotation:180 it does nothing... It seems the transform matrix isn't cleared. This only happen only steps of 180, 360... anything else works fine. TweenLite.to($("#image1'), 5, {rotaion:180, parseTransform: true, clearProps: "transform" }); Thank's in advance
  7. The ThrowProps Rotation demo code produces some erratic behaviour although it only happens when the dial is within a movie clip ie. nested movie clips. Symptoms are that the dial; 1. lags behind the mouse pointer and 2. rotates in the correct direction, but only from 90 to 270 degrees, it then rotates in the opposite direction. Is there any way to tweak the code to correct these problems?
  8. 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
  9. Hello, I've two Android/iOS Apps with rotation. On 1st App this works no problem on Android 2.3.6: var tl = new TimelineMax(); tl.to(document.getElementById(firstCardToTween), 0.4,{rotation:"-45deg", ease:Power2.easeOut})... However on 2nd App a bezier is being applied first with autorotate set to true and subsequent rotations aren't working (on Android), even when using the same syntax as in 1st App. Any ideas on how to solve this? Thank you, your help will be appreciated.
  10. Hello, I've an animation of 52 elements over a curve (a circle) using bezier. Elements come from a certain point and join the circle, 26 in one half of the circle, 26 in the other. autoRotate is set to true. Elements are rectangular. All 52 are clickable. After clicking any of the 52 they are moved to a different location. Problem is they preserve the angle of rotation they got following the curve. Question is how get the current angle of rotation in order to do the math and rotate to recover the initial angle (before going into the circle). Found here in the forums a solution but is not working: TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px"}, ease:Power2.easeOut}); var transform = $("#card32")._gsTransform; var x = transform.x; var rotation = transform.rotationX; console.log(rotation); All I get is : Cannot read property 'x' of undefined Your help will be appreciated.
  11. 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.
  12. Hello, I'm working on my new Portfolio at the moment, and i ran into a problem. The whole page will be based on a cube that spins around. At first I used CSS-Transitions for the animations, but I decided to switch to GSAP JS. It worked great but I got a "little" problem. It rotates the cude diffrently then it did before. This it what it does: http://vps.deesr.com/cube/ This it what it should do: http://vps.deesr.com/cube/cssversion/ *You can rotate the cube with the arrow keys | (WEBKIT only for now)* JS I use to rotate: //GSAP Version TweenLite.to(cube, 1, {rotationY: yAngle,rotationX: xAngle, ease:Quad.easeInOut}); //CSS Version document.getElementById('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"; Because of this "Bug" (its more like Property) the transparents get messed up in the GSAP version. It seems like the GSAP Version rotates the Axis NOT the cube itself. I hope someone is able to help me. Thanks - Deesr
  13. Hello, I would be interested to know if there is a way to dynamically know the rotation that is applied with Physics2D accelerationAngle, or angle in order to rotate the object and seem like its pointing along the animation path. e.x if we have a rocket and we want it to be pointed towards the end of the animation point each each (second/frame) I have set an example here: http://codepen.io/netgfx/pen/nfdBJ What I want to achieve is to be able to rotate the rocket depending on the angle of the animation path. Thanks in advance.
  14. 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
  15. 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!
  16. 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
  17. 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
  18. 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...
  19. 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!
  20. 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?
  21. 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...
  22. 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
  23. 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.
  24. 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}) );
  25. 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.
×