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. HatakeK

    Snap rotation

    I'm rotating an svg on mouseenter, and currently just reversing the rotation with .reverse(1) on mouseleave. What I'd like to do on mouseleave is to tween the rotation counter-clockwise back to the starting point -- i.e. rotation % 360 == 0. E.g. if rotation is 780 when mouseleave, it should rotate back to 720. I couldn't find a way to do this "natively", so I tried getting the current rotation of the svg when mouseleave event fires, but I can't seem to get this value. I read in the SVG-tips that Is there another way to get the current rotation or a simpler way to do this rotation snap?
  2. There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'. It works great in Chrome, but the position of 'p1-1_abc_1' jumped in safari when the timeline start. Safari: Version 10.1.1 (12603.2.4) Chrome: Version 58.0.3029.110 (64-bit)
  3. I forked this off of codepen. http://codepen.io/magalhaespaulo/pen/OyQeQv But mine does not render correctly on iOS. The road and clouds rotate correctly, but the city is way off on iOS. I am trying to get it to work so I can use it on a banner ad.
  4. I was wanting to create a multi-word, repeating 'swinging-sign' animation similar to Jamie Jefferson's here: https://codepen.io/jamiejefferson/pen/zjsCl The way he has that set up (and I'm sure he had to do it that way at the time) called an onStart function that created the swinging effect. That sort of wreaked havoc on the idea of being able to "replay" the timeline. So I pulled up the awesome ease-visualizer and created a custom ease that basically did the same thing. Made for a really simple way to recreate Jamie's awesome effect. I've seen a few folks on stackoverflow and elsewhere wanting to do this so thought I'd post this here for anyone struggling with it. Here's the custom ease: ease: CustomEase.create("custom", "M0,0 C0.128,0.572 0.052,1.374 0.15,1.374 0.28,1.374 0.226,0.528 0.358,0.528 0.466,0.528 0.442,1.164 0.552,1.164 0.694,1.164 0.62,0.764 0.736,0.764 0.788,0.764 0.798,1.044 0.856,1.044 0.88,1.044 0.924,0.948 0.94,0.948 0.961,0.948 0.993,1 1,1")
  5. CodePen should demonstrate the issue I am facing. Clicking on RED should ideally rotate the "+" sign into an "x" sign by applying "rotation":45. However, this rotation must be done alongside changes in inherited height, which, as you can see, totally disturbs the rotation matrix. I am expecting the scale of the icon to change with relative box-position unchanged, i.e. the center of the icon as per transformOrigin property should stay the same relative to the parent box. Any help would be appreciated!
  6. Hello, I need wheel spinning like below video. could you please guide me /Ganapathi
  7. It is possible to get the value while the wheel is rotating. Not the only endValue? I need the value to scroll a list og symbols and text in a div. As an old iPod. Troels Fiig
  8. 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 });
  9. Hello guys! I need to know how to replicate this animation using GSAP only! I dont have any idea on how to achieve the animation from animate.css. If you have some suggestion please let me know. If you know how to do it please reply. I've used rotateZ but doesn't copy the animation! Here's the codepen link: http://codepen.io/Waren_Gonzaga/pen/rrmXNZ Regards, Waren
  10. I'am trying to get general idea how to get current value of rotation on a div object using Draggable rotation property. Any help would be appreciated.
  11. I'm attempting to run 2 directionalRotation tweens back to back - first clockwise and then counterclockwise. My app requires that I be able to do this in 2 separate timelines which are added to a main timeline. I made the codepen short and sweet. I've tried this as 2 separate tweens in a single timeline and it has the same behavior as 2 timelines in a main timeline - it does the first timeline/tween and doesn't do the 2nd one. I just discovered this issue in my app and am supposed to release this tomorrow. Yikes. Can anyone tell me what's up? I'm using a callback to clearProps like: TweenMax.set(gp,{clearProps:"rotation"}); but tried directionalRotation as the property to clear as well. As usual, I'm sure I'm doing something wrong. Thanks in advance for the help.
  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. Hi there... I've just started with greensock and been loving it so far. However, I'm having an issue with getting rotationY to work in Firefox, IE11 and Edge. I need to support these browsers and everything else has worked perfectly! I've attached my codepen, can anyone help? It works perfectly in Chrome and Opera!
  14. Hi all, I have svg with couple of rectangles and I would like to scale them randomly while hovering with respect to the svg origin. At the same time I would them to rotate individually around their axis. The problem is that either transform origin gets overwritten by svg origin or vice versa. See the pen http://codepen.io/anon/pen/RRowRx. The rotation is commented out. Thanks a lot for any suggestions!
  15. I created the following animation using css/javascript, but was told that it would be easier to achieve what I need done with Greensock. http://codepen.io/gtdesign/pen/JKGmeO I would like help in seeing if there is a way to hover over one of the circles, say for instance “Gutters” that the rotation stops and the “Gutters” circle gets larger and changes color. Can all of this be done using GSAP? Thanks for any help, Andy
  16. Hi, Is it possible to make an element that has a transform origin set to 'top left' rotate (using Draggable rotate) around the element's center, as if the transform origin was originally set to 50% 50%? I was thinking perhaps to temporarily changes the transform origin yet keeps the element in the same position in the onDragStart event and in the onDragEnd event to restore the 'top left' origin, is that possible? Thanks, Elior
  17. Hey, guys! I was wondering: is it possible to make, for example, rotationX from -90 to 90 in cycle while tween is being animated? Like: tl.from(element, 1 {rotationX: --from 90 to 90--, y: -1000}) - and while this tween is animating the element continues to rotate.
  18. 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?
  19. 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!!
  20. 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 same root SVG element appears to only leave the last one applied active, in this case the x,y drag. Can anyone think of a solution whereby I can use Greensock's native events (no desktop only events) and apply x,y and rotation to the same SVG element triggered by two elements within the same SVG? I have tried wrapping the SVG in a DIV and then applying x,y to the DIV and rotation to the SVG, but this just creates more complexity and weirdness regarding the translation of the DIV versus the SVG; sometimes after dragging the DIV rotation origin would change, despite setting it in CSS. Many thanks in advance.
  21. 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
  22. 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
  23. 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 higher the more it spins? • if the dial spins really fast my current way of calling the function segmentGlow() sometimes misses out if the numbers are jumping up in big steps • i really want the segments to animate each time the dial passes, but I’m not sure if calling the timeline in the function again works I’m hoping I’m missing out on something and there is a much easier way of solving this…. any pointers/help greatly appreciated
  24. 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 same script served from the same server. I'm running this with Jekyll on localhost. I have a GIF of the Chrome behavior here (file is too large to upload on this site). https://s3-us-west-2.amazonaws.com/miscellaneous-shares/chrome_gsap_animation.gif Appreciate any insights or hacks on why this is happening.
×