Jump to content
Search Community

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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 145 results

  1. 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
  2. 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.
  3. 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.
  4. 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.......
  5. 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!
  6. 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!
  7. 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
  8. 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
  9. 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.
  10. 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?
  11. 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!!
  12. 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.
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 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.
  18. 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:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }
  19. 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
  20. 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.
  21. 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 pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
  22. 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. Basically, the div should flip just like a page of a book, from the initial position and not from any other that i do not want. Any help maybe ? Thx in advance, Cosciug
  23. 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
  24. 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?
  25. 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
×
×
  • Create New...