Jump to content

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


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi everyone this is my problem, i making a little practice and i want rotate a image but i don´t want use CSS only script var img; function init(){ ctx = document.getElementById("canvas").getContext("2d"); img = new Image(); img.src = "http://postimg.org/image/qj0abntbh/"; img.xpos = 50; img.ypos = 10; img.onload = function() { TweenLite.ticker.addEventListener("tick", loop); } function loop(){ ctx.clearRect(0, 0, 800, 600) ctx.drawImage(img, img.xpos, img.ypos); } TweenMax.to(img, 7, { rotatio
  2. I'm using the ThrowProps rotation code, except it doesn't quite work how I want it to. How would I get the AS3 ThrowProps Rotation Demo.fla code to snap to 90 degrees as in the Draggable js demo? http://www.greensock.com/draggable/ http://www.greensock.com/js/demo/throwprops/spin.html Need some AS3 code from the following .js code: var rotationSnap = 90 * (Math.PI / 180); //90 degrees described in radians (for snapping Draggable.create("#knob", {type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! throwProps:true, //enables kinetic-b
  3. This is just a math question that I'm struggling to answer... I'm using the Draggable with type: 'rotation'. And I want it to "snap" to degrees I'm providing via an array. The example snap code looks like this: var rotationSnap = 90; snap:function(endValue) { return Math.round(endValue / rotationSnap) * rotationSnap; } Since my "rotationSnap" variable could be any number between 0-360, how can I calculate the return value to always be between 0 and 360?,Specifically when the endValue is negative or higher than 360. Example Issue: Let's say my array contains the values 0, 90,
  4. Hi, I would like to report a bug found using Draggable (great library!), hope this is the right place. If you drag an element (x,y) inside a parent that has been previously rotated, then this.x and this.y values inside the onDrag callback refer to horizontal and vertical directions, ignoring the fact that the parent is rotated. The result is that if, for example, you rotate the parent by 90deg, when you drag the child horizontally it moves vertically and viceversa. The fix however seems easy. Let's say we have the angle of the parent rotation expressed in degree in the variable 'angle'. The
  5. Hello, I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied? Thanks, ErinD function init() { console.log("yeash!!!!"); needleImg= document.getElementById("bNee
  6. I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{ty
  7. Firstly I would like to say thanks to you Greensock guys for making such a great animation platform. I have struggled with animation over the years using JS and GS is simply the best out there. My question is this: I am currently trying to create a clock with an hour and minute hand (also an AM to PM dial but that can come later after I get over this hurdle). I have got the hands to tween infinitely around and this works great if it were static and you just want a clock to keep spinning and spinning around. What I ultimately want to acheive is to be able to set the time and the clock w
  8. 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 ele
  9. 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
  10. 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 wrapOffs
  11. 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
  12. 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;back
  13. 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
  14. 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?
  15. 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] = docum
  16. 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.
  17. 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
  18. 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!, i
  19. 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
  20. 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.
  21. 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.z
  22. 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
  23. 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 f
  24. 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"
  25. 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...