Search the Community
Showing results for tags 'rotation'.
Found 145 results
-
Hi, I read some topics where people WANT the smoothing applied by modern browsers, if you rotate or zoom images for instance. That is NOT what I search for. In my example there are three spans with border. Two of them are being rotated and get new top/left positions, and even if their final rotation is 90 degrees, they become smoothed. How can i DISABLE this somehow? I was really searching a long time, and all I assume is that this is browser rendering dependent, but maybe I can get a hint here. Btw: When I reverse that animation back from picture 2 to picture 1, they are crisp again. Thanks!
-
Hi guys I want to be the new face animation. For example, the yellow circle to the top of the cosine right move. Please help me.
-
Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
-
Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
-
Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
-
Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..
-
Hi all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0). I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen). Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way? Thanks in advance!
-
Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
-
I've little experience with HTML5 and Javascript. I've only built sites with templates, and I'm attempting my first project that really requires a site built from scratch. I want to use knobs to sort images based on the knob setting, so I've got the draggable knob up and running, now I'm wondering how to even search this forum for answers on how to capture the knob's new position as a variable I can use to sort some images. I've got some examples of image sorts by tab pushes, so what I'd like to do is capture the knob's position after the user rotates it, set a variable and when the user presses sort, insert the variable value to duplicate the effect of a tab push. I'd appreciate any links to tutorials or documentation I can read that is specifically about this kind of task. Best, Marc
-
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
-
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.
-
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...
-
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!
-
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
-
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!
-
rotation by degrees - counterclockwise not functioning as expected
Haikukitty posted a topic in GSAP
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!! -
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. -
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.
-
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?
-
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. -
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.
-
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.
-
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.
-
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
-
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
