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. 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 216 degrees and not 72. I basically need the pie to advance one slice in each direction depending on which arrow you click. Anyone know what I'm doing wrong? FYI - just discovered Greensock tonight - and so far its amazing! But I'm still struggling to understand some of the functionality and syntax. Thanks!!
  2. 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 to matrix(1,0,0,1,0,0) This does not happen on other rotation angles.
  3. 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.
  4. 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-out stars in the page (The page did the same thing when all stars were activated; I disabled them to simplify the code for troubleshooting) I've tried rotating the wrapper container rather than the star container; it was no different The page is working in other iOS browsers, in desktop Safari, and in Android browsers Am I missing something completely obvious?
  5. 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 locked in the vertical plane of dragging. Here is the container markup of which all the code sits - I'm afraid the code is too complex to add to a codepen. <section id="Container" class="collection" style="width: 3072px; transform: translate3d(-1024px, 0px, 0px);"> I've tried looking into the applyBounds function and defining bounds, I even took the example back to the basic one on codepen. Ive used setTimeout to see if I was calling Draggable too early. I'm stumped.
  6. 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 ignored even if bezier: {autoRotation: false} as long as the bezier: {...} defined first. So this can be also solved by switching them but i like to be sure that i using these things properly.
  7. 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="height: 11.2%; width: 8.65979381443299%; position: absolute; top: 17.6%; left: 67.5257731958763%; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: visible; -webkit-transform-style: preserve-3d; display: block;"> <button checked="checked" tagname="BUTTON" src="" srcsize="0" srcduration="" srcformat="" domstyle="[object Object]" name="button 17" class="button adelem" data-id="9ivg" adtype="button" style="width: 100%; height: 100%; left: 0px; top: 0px; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;">button 17</button> </div> The rotation is applied to the div wrapping the button [data-id=animWrapper_spin9ivgo7os], which is inside another iframe. I am unable to reproduce the error in simple page. Please help me if someone know what could have been the reason.
  8. 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 to re-use the animated value to animate a pie chart type fill which will be overlaid on top of the dial.
  9. 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
  10. 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
  11. 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 supplying an array to the snap option, but once the dial turns more than one rotation, it comes whipping back like it's attached to a rubber band. In addition, I can't use a callback with this technique (I don't think). But the GreenSock Spin demo allows you to spin the dial around and around, and it smoothly lands on a "snap" degree. Thanks for any help!
  12. 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
  13. 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
  14. 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 both cases (centered checked and unchecked) and keeping transformOrigin:"50% 50%". Hoping to be sufficiently clear Thanks
  15. 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
  16. 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.easeInOut}); Any suggestions will be greatly appreciated. Thanks! Fred
  17. 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 render out this initially for IE8: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: 0px; ZOOM: 1; DISPLAY: block The problem I'm seeing is the margin is set to 0, causing the graphic to be offset from the center rotation point visually. If I call the rotation command again, it renders out with the correct margin to keep the image centered: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: -31px 31px 31px -31px; ZOOM: 1; DISPLAY: block; Has this been reported before? Is it something I'm doing? I'm testing this in a VMWare image of Windows 7 with an IE8 install version 8.0.7601.1.17514 Thanks for any direction
  18. 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 dragging, but none of the momentum works and the rotation is incorrect in that the movement shifts from clockwise to counter clockwise mid-drag.
  19. Hi everyone this is my problem, i making a little practice and i want rotate a image but i don´t want use CSS only script var img; function init(){ ctx = document.getElementById("canvas").getContext("2d"); img = new Image(); img.src = "http://postimg.org/image/qj0abntbh/"; img.xpos = 50; img.ypos = 10; img.onload = function() { TweenLite.ticker.addEventListener("tick", loop); } function loop(){ ctx.clearRect(0, 0, 800, 600) ctx.drawImage(img, img.xpos, img.ypos); } TweenMax.to(img, 7, { rotation: 360, delay:2.2, repeat: 5}); } thanks
  20. I'm using the ThrowProps rotation code, except it doesn't quite work how I want it to. How would I get the AS3 ThrowProps Rotation Demo.fla code to snap to 90 degrees as in the Draggable js demo? http://www.greensock.com/draggable/ http://www.greensock.com/js/demo/throwprops/spin.html Need some AS3 code from the following .js code: var rotationSnap = 90 * (Math.PI / 180); //90 degrees described in radians (for snapping Draggable.create("#knob", {type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger) snap:function(endValue) { //this function gets called by ThrowPropsPlugin when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, we'll just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. Keep in mind that rotation values are always defined in radians, not degrees! return Math.round(endValue / rotationSnap) * rotationSnap;}});
  21. This is just a math question that I'm struggling to answer... I'm using the Draggable with type: 'rotation'. And I want it to "snap" to degrees I'm providing via an array. The example snap code looks like this: var rotationSnap = 90; snap:function(endValue) { return Math.round(endValue / rotationSnap) * rotationSnap; } Since my "rotationSnap" variable could be any number between 0-360, how can I calculate the return value to always be between 0 and 360?,Specifically when the endValue is negative or higher than 360. Example Issue: Let's say my array contains the values 0, 90, 180, and 270. The problem is that a negative endValue always returns 0 from my array. And an endValue higher than 360 always returns 270 from my array. Extra Info: I have a function that compares endValue to my array and returns the closest number. Thanks for any info and please let me know if I need to clarify.
  22. Hi, I would like to report a bug found using Draggable (great library!), hope this is the right place. If you drag an element (x,y) inside a parent that has been previously rotated, then this.x and this.y values inside the onDrag callback refer to horizontal and vertical directions, ignoring the fact that the parent is rotated. The result is that if, for example, you rotate the parent by 90deg, when you drag the child horizontally it moves vertically and viceversa. The fix however seems easy. Let's say we have the angle of the parent rotation expressed in degree in the variable 'angle'. Then inside the callback onDrag: angle = - angle * Math.PI / 180; var cosAngle = Math.cos(angle); var sinAngle = Math.sin(angle); var relativeX = (this.x * cosAngle) - (this.y * sinAngle); var relativeY = (this.x * sinAngle) + (this.y * cosAngle); relativeX and relativeY are now the corrected values relative to the parent of the Draggable element. Hope this could be useful. Thanks for your great libraries.
  23. Hello, I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied? Thanks, ErinD function init() { console.log("yeash!!!!"); needleImg= document.getElementById("bNeedle"); barometerImg=document.getElementById("barometer"); smallForm=document.getElementById("groupThis"); //console.log(needleImg); TweenMax.to(needleImg, 3, {css:{rotation:145, transformOrigin:"193px 47px"},ease:Elastic.easeOut}); Draggable.create(needleImg, { type:"rotation", throwProps:true, onDragEnd:function() { console.log(this.rotation);}, bounds:{minRotation:0, maxRotation:90} }); }
  24. I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.
  25. Firstly I would like to say thanks to you Greensock guys for making such a great animation platform. I have struggled with animation over the years using JS and GS is simply the best out there. My question is this: I am currently trying to create a clock with an hour and minute hand (also an AM to PM dial but that can come later after I get over this hurdle). I have got the hands to tween infinitely around and this works great if it were static and you just want a clock to keep spinning and spinning around. What I ultimately want to acheive is to be able to set the time and the clock would spin around till it reached that time. I have created a codepen link to show what I have done so far http://codepen.io/anon/pen/Iakzg I am very new to the platform, I hope I can get some advice about what I need to do. Any help is greatly appreciated and I would love to hear from some of you greensock gurus! Thanks!
×