Jump to content

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

Search the Community

Showing results for tags 'rotate'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi, 1. I have a second hand of a clock rotating for 60 seconds 2. I have a minute hand of a clock that should rotate 360/60 after every 60 seconds. The problem is I am using reapeatDelay to delay the minute hand for every 60 seconds but when it plays again, it resets back to the original position 0deg. How do I make the rotate animation continue from where it stopped? Here is a pen https://codepen.io/codebeast/pen/gNNaRp In the pen above, I changed the timing from 60sec to 5sec so you can see what's going on faster.
  2. Hello, i’m trying to learn how to use GSAP. I want to make a “washing machine” rotation effect : - On click object start rotating slowly for 2seconds - rotate at max speed for 2 seconds - rotate slowly 2 secondes till it’s stop (todo later : stop with ease:Elastic.easeOut effect) I thought I could write the 3 orders one after one but when I do so, GSAP only ‘do the first one’ (i didnt use any duration because i'm trying first to make the 3 speeds working) $('#whiteCube').on('click', function(){ TweenMax.to("#whiteCube", 2, {rotation:360}); TweenMax.to("#whiteCube", 2, {rotation:720}); TweenMax.to("#whiteCube", 2, {rotation:360}); }); I don't know if this question is related to GSAP but, any idea why only the first click is launching the function ? the other clics are detected but doesn't launch the rotation. any tips ? codepen.io/Demky/pen/pXBPGr thank you.
  3. The pen shows a typical way of getting the x/y coordinates for a rotated element. I can use this, but wondering if there might be some hidden gem in GSAP that calculates these points already or, if there might be a faster way to get these values...
  4. The square revolves around itself twitching and not doing that smoothly. can anyone help a newbie tell how to fix this? html <body> <div class="test"> <div class="block"> <div class="test-block"></div> </div> </div> </body> css .test{ position: fixed; width: 100%; height: 100vh; background: #000; z-index: 5555555555; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; } .block{ position: absolute; width: 350px; height: 350px; background: #fff; } .test-block{ position: relative; display: inline-block; vertical-align: top; top: 150px; left: 150px; width: 50px; height: 50px; background: darkgreen; } js var tl = new TweenMax({repeat: -1}); var testBlock = $('.test-block'); tl.to(testBlock, 4, {rotation: 360 , ease:Linear.easeNone , transformOrigin:"50% 50%"})
  5. Hi, I try to create an effect like in this example but mine have some bugs on fast hover in and out. Ex: http://m2hagency.com/carprice *** Scroll to the bottom page. Any help would be appreciated. Thanks
  6. Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.
  7. Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  8. I'm trying to use greensock for an animation I have to rotate a number of objects around the mouse. Anybody has any idea on how to use this code and be able to rotate multiple objects around the mouse by just one class?
  9. Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this: TweenMax.to("#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: https://vid.me/9EJU How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015); As soon as I change this manually to something more straight forward, it does work in chrome: transform-origin: 50% 50% transform: rotate(90deg);
  10. Hello, I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming. CodePen URL: http://codepen.io/jbevan2007/pen/RKKVrW We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use. Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties. Our issue: When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix. One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo. Is there any way we can achieve this, while maintaining our rotation at completion of animation? Please let me know if you have any questions or if you did not understand my request. Thanks, Justin
  11. Hi there, While trying to animation multiple SVG circle I found that interesting bug where if I rotate one of my circle (circle2) to the value -90 it seems to go back at to rotate back to 0deg at the end of my animation. Fun fact, if you replace the value -90deg by -90.06deg it doesn't seems to bug, I would guess there is some rounding involve, it jumps to -91deg. This bug seems to occur only on Safari 10.0.1 Even if I found a temporary fix for my problem I'm still curious on what could be done differently to avoid that bug
  12. Hi, I have an question, how to rotation object with origin? i need my object rotate stick at the left and middle of the object. same as the left 2 images Please Help~ Thanks alot.......
  13. My son needed a way to record the data his weather station collected. This is the start of the interface I wrote for him. http://codepen.io/dotComb/pen/Gqdydw Hope this helps someone! -Dan
  14. Hey folks, This is my first every question on the forum, so I hope to get some answers from some of you who are veterans and much more expert than I am. I've been using Greensock recently, specifically the TweenMax version. I have to say, GREENSOCK IS AMAZING! On to my question, this will be quick and should be fairly simple to answer, so here goes: How do I get an object to rotate in place after a button it is clicked, and then get it to reset and get ready to rotate again before the button is clicked again? I would really appreciate some help on this, and I have to re-emphasize that I really think GREENSOCK IS AMAZING! Thanks again folks!
  15. Can anyone give me a clue as to why IE9 is rotating my SVG files differently than all other browsers? TransformOrigin doesnt seem to work the same (I have tried, %, pixels, and top), and it is going in different directions. The CodePen link should show the 3 lettter "A"s pointing to the left. But in IE9, they get squished and point down after a TweenMax.set call. Any thoughts? Thanks very much. Also posted here in case CodePen doesnt allow IE9 viewing: http://brendyn.com/test2/
  16. Is it possible in the JS version of gsap to rotate or enlarge an image about its centre rather than from a top corner? I think you can do this with the TransformAroundCenter plugin in AS but can't find it for JS.
  17. Hello, I may found a bug(?) in CSSPlugin version 1.15.1 (and later) The following two examples are exactly the same, except the included CSSPlugin version (1.15.1 VS 1.15.0) Please check the strange "jump" effect after the scale transition with version 1.15.1 1.15.1: https://jsfiddle.net/w6jcm33u/ 1.15.0: https://jsfiddle.net/w6jcm33u/1/ Is this a bug or should I change something in the transitions?
  18. 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.
  19. I'm trying to get a square to rotate around an origin whilst getting larger, however I think the origin needs to move, or do I need to use a static rect to do the rotation, with an inner rect that I grow in size (scale is no good as the line get larger which I don't want). TIA - Mat http://jsbin.com/gilale/edit?html,js,output
  20. I'm interested in creating a draggable div that can be translated or rotated depending on some criteria, for example: rotate if CTRL is pressed, translate otherwise...or, translate if the mouse is clicked near the center of the object, rotate if the mouse is clicked near the edge of the object. The method I've tested involves detecting the CTRL key up/down events and killing the existing translate/rotation draggable and creating the other one. This works except that after an object that has been rotated, then translating it causes additional rotation. Any suggestions?
  21. So, I was trying to implement Fancy's rotation approach found here: http://codepen.io/MAW/pen/doPLME. But, it only every applies to one object. How can I get all objects to rotate when a user selects that object and pulls it around, if that makes sense? Also, I've been having trouble deleting an object and thought something Draggable.disable() or something would work but doesn't seem to. Thanks for your help - I'm a total newb to greensock so its much appreciated!
  22. I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel
  23. Hi, I have a problem with transformations in Chrome (webkit browsers). I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names. In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d. What's the solution? Thanks for the help!
  24. I have an odd issue. I've created a simple rotation as follows: <div id="wish"> <p>Make a wish.<br> Write it down.<br> Tie it to the tree.</p> </div> I've added backfaceVisibility:"hidden" to the contained 'p' tag which works. When I add a pseudo element div#wish the backface visibility on the p tag fails and the pseudo element flickers badly during animation. Can anyone shed any light on this? I've been trying to solve it for nearly 2 hours! Thanks.
  25. Hi all, I'm having this problem with SVG rotation. Basically it always reset its position once the animation is finished. Codepen: http://codepen.io/anon/pen/QwwEYX During testing, it works fine on Chrome, but not of Firefox and mobile Safari. I'm using Firefox 33.1.1. Anyone's having the same issue? Any pointer is greatly appreciated. Cheers! UPDATE: Apparently the problem is exclusive to FF for mac and Safari mac.