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

  1. Its quite easy to do a diagonal rotation in CSS. http://codepen.io/moorthyrweb/pen/jEayJL But, using GSAP how can I achieve the same?
  2. I cant for the life of me get a simple 3d rotation working in iOS Safari right now. It works from the Codepen for me, but not with all the same code in a simple html file (attached). This tells me I am probably doing something dumb. But basically it works correctly from desktop, but from my phone the rotated div disappears as it rotates. Please help. http://codepen.io/anon/pen/raYMwR index.html
  3. Is transformOrigin supported in IE9? If not, is there a work around? Strangely enough I don't have an issue with this in IE 8. Box 2 is supposed to rotate from the top but doesn't seem to do this in IE9. Thanks in advance. Any suggestion is much appreciated.
  4. Hi, rotation, rotationX, rotationY, skewX, skewY attributes aren't working when I use negative number after '+=' please check the attached pen. There is no problem when I use x, y, or scale parameters. Are you planing to add '*=' and '/=' support? I think it would be great for scale attribute...
  5. 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
  6. Hi all, It seems the default value for transformOrigin has changed (but not the documentation). It broke some of my older animations that expected the origin in the center. While TweenMax 1.11.8 was fine, my animated bicycle was shattered all over the screen with version 1.15 (or gsap/latest). I thought I'd let you know
  7. I have another question, and it might be something I'm doing wrong - but my on-load rotation works perfectly in chrome and safari, but does not work in Firefox. My on-click rotation works in all three. Is there a known firefox issue? Or do I need to use a different syntax to run the animation on page load in all browsers? Thanks!
  8. Hi there: I think I'm doing something wrong in CodePen, since my example is not functioning - but the code I'm using is in there. Here's a link to view what I've got going on: http://bluetabby.com/rr/index17.html I want the pie wheel to spin on load (preferably a random multiple of 72 degrees between 5 and 10 but I haven't gotten that far yet) and then advance by 72 degrees clockwise with right arrow click, and reverse counterclockwise by 72 degrees on left arrow click. Everything is more or less working except that my counterclockwise reverse rotation seems to be going about
  9. I've come across a bug when applying a transformation on an already rotated element with 3d rendering enabled: You can see the codepen for the live preview I have an element with 180deg rotation and Z transform: <div id="aa" style="transform:rotate(180deg) translateZ(10px)">I'm rotated 180 Deg</div> // On Webkit/Gecko this happens only with z > 0, On IE it happens also with z == 0 And then I run some transform animation on it TweenMax.from('#aa', 2, {x:'+=100'}) The result is that the rotated div flips back to 0 degrees, or, from matrix(-1,0,0,-1,0,0) it transforms t
  10. 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.
  11. I have a simple 3d rotation to begin a proof of concept. It's working everywhere except iOS8.1 Safari. Of course, the PEN i attached works in the browser.... but on the page itself, the star flashes and disappears. Pen: http://codepen.io/dreigenannt/pen/QwWOvP Page: http://staging-u01.fahlgrendigital.com/greensock/ The pen and page are using the same version of jQuery GSAP files are loaded from CDN, so they are the latest version I installed the webkit and z-index fixes that I read in other forum posts The code in the pen is identical to the code in the page, except for other commented-
  12. I'm using multiple instances of Draggable in the type:rotation and I've hit a snag. I'm building a html based single page app for iPad, this slides horizontally through sections of content using 3d transform. You swipe vertically within a section to see slides, and swipe left or right to move through sections. It moves 1024px every section swipe. Draggable rotation works perfectly if it appears on any slide in the first section, but the interaction is offset somehow on slides in subsequent sections. it's as if the datum point is relative to the window, or the Draggable instance is loc
  13. Hi! I don't know whether these are bugs or not, (or i just didn't get the concept of the BezierPlugin properly) As you see on the pen, if in the properties object i add props like (x, top, rotationXYZ) after the bezier: {'x', 'top', autoRotation: true}, those will be ignored. But if i switch them, the BezierPlugin will be ignore the properties which are defined before the bezier: {}. Ok, it's probably the correct behavior but it would be cool to be able to combine these values like x and xPercent:) But as you see on the third example of the pen, the rotation parameter will be
  14. I am trying to rotate an element(button) counter-clockwise 90deg using TweenLite. It is working fine in chrome and firefox but misbehaving in IE9. Expected behavior is that it only rotate but in IE9 along with rotation it is changing is position also. This behavior is consistent in IE9 and is produced only in special case, with simple rotation test in IE9 the behavior is as expected. Here is a video for reference (notice the button labeled button 17): http://screencast.com/t/waaEX1NxWcTd The HTML of button looks something like: <div data-id="animWrapper_spin9ivgo7os" style="hei
  15. I have a dial I wish to retrieve the rotation value from after a submit button is clicked. A user can rotate the dial and upon clicking the button the dial should animate to the update position and the percentage value use the calculateAngle. I've tried retrieving all manner of properties from the Spinner object itself and the tweenlite object but I can't get a dynamic value, always returns the end rotation value but I want it to poll the rotation in the same way that the percentage value updates when you directly interact with the dial. The reason I want the value to animate is I wish
  16. I have found some code on SnorkleTV that performed a 3D Flip of a page, and I was trying to use it. But in my use of it the object is being rotated from the left margin, but what I need is for it to be rotated by the x axis center of the object. The following is the code that I am using for the first step in the Flip. var flipSpeed:Number = 0.5; var tl:TimelineMax = new TimelineMax({paused:true}); tl.append(TweenMax.to(currentView, flipSpeed, {rotationY:90, visible:false, ease:Linear.easeNone})) The example given on SnorkleTV was extraordinary. I hope to get it right. Gary
  17. Hi, in my current HTML5 project I need especially the scale and rotation skills from GSAP and one of the requirements is, that it have to run on IE8. Now I took notice that it doesn't works. I tested it at first in IE11 and emulating IE8 and after that I used an real IE8. In all other current browsers it works fine, include in IE11 and emulated IE9 and 10. The code, you can see in my codepen example isn't complex. What I made wrong or is it impossible in connection with IE8? Thanks for information to this problem. Best regards. Tilo
  18. First thanks to Jamie and Jack for answering a similar question. Turns out I was asking the wrong question What I'm failing to achieve is something very similar to the Draggable Spin demo... http://www.greensock.com/draggable My requirement has two differences: I need to snap to a bunch of degrees from an array that are not in even increments. For example [0, 88, 185, 268]. I need a callback so I can display information related to the "snapped" degree. You can think of this as the Wheel of Fortune with uneven distances between each pin. A few things to note: I tried supplyin
  19. Hi all! I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically. But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked. Demo Link: http://theoremcreations.com/undertone/16002/ss/demo/ CodePen Link: http://codepen.io/anon/pen/lnIHg Animation_Demo.zip
  20. Here's an odd one. Rotation for SVG elements doesn't seem to work in Firefox. Does anyone know if there's a workaround? http://codepen.io/Mode7James/pen/mjxtC
  21. Hello, My question with this example : http://codepen.io/NicolasJ/pen/umFdy How to ensure that when "Center" is unchecked and click on the button "DO IT 2" the red block is positioned correctly. That is to say that the two upper corners are aligned and the result is displayed [t = 0 | b = 290 | l = 0 | r = 50] and not [55 t = | b = 235 | s = 55 | r = 5] How to ensure that when "Center" is checked and click on the "DO IT 3" button the red block is centered on the gray block? In summary, my question is how to properly calculate the sets of coordinates which I want to go in bot
  22. Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior
  23. I am using TweenMax with Adobe Edge Animate, and I am trying to rotate a div to zero degrees from various starting points. If I set rotation equal to any positive or negative number, the div will rotate to that value. However, if I set rotation equal to 0, the div will not rotate at all. Is there a secret to this that I am missing? Here is a sample where photo1 is the div. It is a photo that is on the screen and initially at a -24deg rotation. I want it to move to the coordinates listed while rotating to 0deg. TweenMax.to(photo1, 1, {top:215, left:240, rotation:0, ease:Power1.easeIn
  24. HI there, I'm experiencing a bizarre issue with IE8 and the rotation transform code that GSAP is producing. I'm trying to narrow it down to either my bad code, IE8 or a possible bug in GSAP. It may be my code but that's why I'm asking here. The problem is with the first rotation transform on an image. It's not keeping the image centered using the margin offset in the rendered code. Calling the rotation command a second time, however, inserts the correct margin centering code. Take this line of code: TweenMax.to( '#stairs-container-bottom', 0, { rotation: -30 } ); I'm seeing it
  25. I am trying to use Draggable to rotate a <g> inside some inline SVG. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/utils/Draggable.min.js"></script> ... TweenLite.set(".group1", {transformOrigin:"50% 50%"}) Draggable.create(".group1", {type: "rotation", throwProps: true }); This will allow the element to be rotated by d
×