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. Hey, there! I'm quite a newbie with GSAP and it seems that all I'm making is a chaos in code. My goal is to create rotation effect of bottle, so I need to "rotate" the text which goes up and appears from bottom each time the button is pressed. Where to start digging? upd And why does the text invisible on start?
  2. 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 $().d
  3. I am creating an SVG 360 degree protractor that needs to be dragged (x,y) and rotated via two controllers (triggers) within the same SVG. The circular arrows in the illustration are the rotation controls, the vertical and horizontal arrows are the x,y controls and the "RESET" button just clears all Greensock properties. I used a solution posted by Diaco, which works very well for desktop, but by using mousedown events rather than Greensock's native onClick events it appears that one loses mobile touch events built into the Greensock library. Attempting to bind two event listeners to the s
  4. Hello, This is my first post here. I have an issue with rotation. The text in the <div> elements flickers before each rotation. Can you see this ? Any way to resolve this ? Thanks
  5. Hello, I want to offer an effect of opening pannel just as in this codepen http://codepen.io/anon/pen/NxqaJX Please note that I can't attach the images normally figuring the doors so I used red background. Problem is the rotation is not keeping the normal aspect ratio of the 2 openning panels, they seem to be growing when opening. Is there a way to improve this. Moreover, I have another option wich would be to open sliding (not rotating) each element respectivelly to left and right. How to do it ? Thanks you for help. CS
  6. Wondering if someone can help shed some light on something I am trying to do with GSAP which I just suspect I am going the wrong way about solving. Essentially there is a dial that spins for a random amount of 360° rotations and it finally settles on one of 10 segments (each 36° in size). What I am hoping to achieve is the segments to animate as the dial goes past them each time (so in sync with the speed of dial). I have very crudely recreated in CodePen, the 3 issues i think I have are: • I can't get the value returned from updateProps to always be a 0-360° value - it gets higher and
  7. I'm mystified. Attempting to animate an arrow so that it rotates through various points on a circle. The codepen seems to work perfectly: the arrow rotates smoothly to the number of degrees set, then rotates back to 0. However, the behavior isn't working properly in Chrome browser. The arrow rotates approximately 30 degrees, seems to bounce back from that limit, rotates to negative 30 degrees (i.e. ~330), overshoots back to ~+10 deg, before returning to 0. On Safari the arrow rotates to about 60 degrees before returning to 0. Both browsers behaving very differently despite running the
  8. Hello, at the moment I have a div that rotates infinite with normal css animations. But I want to do it with Greensock, because i want the animation to be more responsive depending on what I click. The idea is that I want the div to start rotating after clicking a button. It start slow and builds up speed. After 1 Second it's on full speed and keeps rotating until I press the button again. Then it should decrease the rotation till it stops. Could somebody point me in a direction? I would prefer to use tweenLite if that is possible.
  9. Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin
  10. Hi, I just started learning GSAP and my first task is to animate an image like a hinge effect starting from the ground. I was able to get a similar effect but the image is upside down, I'm confused about rotation and would appreciate any help with a solution and what I did wrong. Thanks! http://codepen.io/gk/pen/NGEgmq
  11. I am trying to rotate the top and botton element from particluar rotation angle to 0 deg. While the elemnts are getting rotated i want the height of that elemnt to get adjusted accordingly. It must look like that the arrow is geeting shhot from the bow.
  12. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several
  13. Hey @ all, need some help with a very simple animation, but i can't figure out what is actually happening. here is the Pen again: http://codepen.io/Cosciug/pen/rVEORw Here's how the nimation should go: On hover over yellow div, it moves to the right, and starts rotating -180 deg on the Y axis, origin being the left border. Here's the problem now, the the div starts rotating, it instantly jumps weirdly and starts from there instead on the original position. This bugs me out and i spent already over an hour searching why this is happening but i just can't figure out why.
  14. so i am building a bike animation, and i want to rotate the pedal assembly while keeping the pedal itself perpendicular to the ground. i am failing on that last bit. current version of the code here http://codepen.io/brountreeRS/pen/mJgNbb
  15. Hi, Please see my (first!) Codepen: I'm trying to rotate an object 360º on mouse-over. I want it to always stop at the top again (at the start position) - even when I mouse over several times very quickly. But it overwrites the current tween and then stops somewhere else. In Flash I was able to just say TweenNano.to(evt.target, 1, {rotation:-360}); but that only works once in JS. I tried to add "overwrite:"none" to no effect. Any ideas?
  16. Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
  17. Hi, I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for. In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here. Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again. Th
  18. Hi guys I want to be the new face animation. For example, the yellow circle to the top of the cosine right move. Please help me.
  19. Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
  20. Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = functi
  21. Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
  22. Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..
  23. Hi all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0). I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen). Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way? Thanks in advance!
  24. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that l
  25. I've little experience with HTML5 and Javascript. I've only built sites with templates, and I'm attempting my first project that really requires a site built from scratch. I want to use knobs to sort images based on the knob setting, so I've got the draggable knob up and running, now I'm wondering how to even search this forum for answers on how to capture the knob's new position as a variable I can use to sort some images. I've got some examples of image sorts by tab pushes, so what I'd like to do is capture the knob's position after the user rotates it, set a variable and when the user