Search the Community
Showing results for tags 'rotationy'.
Found 17 results
-
Hello guys, I was working on some animation for my client and I found the issue with rotateY which I'm unable to implement. Can you guys please check and let me know if there is any solution to this? I've checked few forum topics and did see the solution below shared by you guys. It suggests to use scaleX but element is not a symmetrical element so I need it actually be flipped and I don't think I can use it as a separate SVG as well. By the way storyline is as follow (store guy filling crate to a van): store guy goes near the van crate is left there (hide crate) store guy come back to the crate laying outside the store picks another crate repeat until there is no crate So can you guys please check and let me know if there is any solution to this? Thank you for checking in. Abi Rana
-
hi, I just found, strange behavior in my codepen. It is just a very simple rotationY example, with works fine in version 1.18.5 (and all 1.18.x a maybe below), but it does not work in 1.19.1 and above, as i tried changing source. I am not sure if it is bug or change in behavior, thanks Petr
-
Hello all, Firstly, I'm very pleased to have found greensock and have already used the wealth of knowledge on this forum to answer many questions I had. However, this one I couldn't find an answer to, so here is my first post. I found a lovely pen by Allan Pope that has a door opening and closing using "rotationY: 90" and "transformOrigin: "left center"" This pen is using TweenMax version 1.16.1 I believe. When I went to play around with the code in my editor where I was loading version 1.20.2 it didn't work. I went ahead and checked the other versions and the position changes when using version 1.19.0 and after that, the door does not rotate either. I gather there were updates. Could someone please help me to understand and guide me on how to change the code to work with the latest version of TweenMax? I created a codepen and at lines 29 in the JS I tried the CSS way and below that is how it was set before. Many Thanks in advance, David
-
Hi GSAP, i need help. rotationY is ingoring me. I've tried all versions: rotation with quotes, without, with 'deg' and without. rotationY: '50deg' rotationY: 50deg rotationY: 50 I even tried to make it work with transform property, just like with CSS, but it's working very strange, not like i expected. transform: 'rotateY(50deg)' X and Z axises are working, but not Y. What am i doing wrong?
-
Hello, I'm trying to make rotationX/rotationY transforms on SVG shapes with the last version, GSAP 1.19.1, but it does not work. This is working only with rotation or rotationZ properties. Here you can see that nothing happens on mouseover event: http://codepen.io/classikd/pen/rjPxKr But if i am using GSAP 1.19.0 or lower version everything is working well : http://codepen.io/classikd/pen/NdorKo Is there a bug or do some properties have changed, i have found nothing about it ? Thanks for your help.
-
Hello, I have created this animated logo using CSS which triggers on hover : https://codepen.io/nikches/pen/pRbqMQ I started recreating the above animation using Greensock and i'm stuck on the "rotationY" property. My problem is with the right wing of the eagle. As you can see in the CSS animation the right wing moves 60 deg towards the viewer on the Y axis, but when i recreate the same wing animation with GSAP the wing is moving away from the viewer. I have tried using negative values (rotationY: -60) but the result is the same. I have also tried using "directionalRotation" by apllying "rotationY: "-60_cw" / "rotationY: "60_cw" / "rotationY: "-60_ccw" / "rotationY: "60_ccw" without success. I would like to ask for your help in identifying what am i doing wrong ? Thank you for your time and help.
-
Hope someone can help me out here. I am doing a very simple y-axis rotation animation that works fine on desktop and Android, but does not rotate on iOS (Safari OR Chrome). Any ideas what I'm doing wrong? Thanks so much!
-
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!!
-
Hi, I've come across a bug (So far only in Safari on Mac) and Im assuming it is with bug safari rather that GSAP but I'm wondering if there is a hack I can use to fix it. I've used the brilliant tilting script from ihatetomatoes and added some buttons within, but when you rollover the buttons you will notice that some have a very restricted hit area (hover state and click only works when you are rolling over in the middle of the top two buttons, not the full width. Anyone seen this before? D
-
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
-
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
-
Hello, I am consecutively rotation a series of object on the stage and I am initializing them by setting their rotationY to -65 and then rotationY to zero. The problem I am having is that objects from left to right are not starting from the same rotationY position. Some look to be less rotated than others. The interesting part is that from right to left the rotation lenses as if they are all in some sort of unified perspective. Can anyone please shed some light into this? Thank you in advance.
-
I'm no real programmer but I created this: http://fizion.maakt.nu/gstest/ Not sure why but there's something wrong with the 3D transform. If you look (in Chrome) at the developer tools you see that it will be something like this after one (or a few) clicks -webkit-transform: matrix3d(0.99992, 0, -0.01243, 0, 0, 1, 0, 0, 0.01243, 0, 0.99992, 0, 0, 0, 0, 1); I removed the perspective from the wrapper but still the same. I tried to do something with roundProps but no luck so far. As far as I could see the first click is always working like it's supposed to be working. Since I rotate with 90 degrees I'm not sure why it behaves like this. If you click more often the difference will get bigger and bigger which is not really my intention. Hope someone can help me out.
-
Hello, is there any method to avoid blurriness while tweening images with 3d transforms (rotationY exactly)? Additionally there is a tiny jump in size of an image when the tween begins. Here's the screens: before tween, sharp and after tween, blurred:
-
Hi, I found a solution in this forum to this problem - unfortunately it doesn't work for me. I do a rotationY by 180 degrees. So after the tween the image is flipped and you are suposed to see the backside - but then the image is blury. So I applied the solution I found here (deBlur) but then the image flips back to the frontside. I appreciate any hint. Max TweenLite.to(Africa1, .8,{ alpha: 1, rotationY : Africa1.rotationY -180,onComplete: deBlur, onCompleteParams: [Africa1], delay: .3 } ); } //kill matrix3D and reset x and y function deBlur( Africa1:MovieClip ): void { var currentX = Africa1.x; var currentY = Africa1.y; Africa1.transform.matrix3D = null; Africa1.x = currentX; Africa1.y = currentY; }
-
Hi, I have been using TweenLite/TweenMax for some time and it is a really nice library. Unfortunately I have run into a strange problem. I have a simple shape (a square) which I have made into a movieclip with an instance name 'test'. Now i want to perform a simple rotationY tween to 90 in order to rotate the square in such a way that you only see its side (kind of like a line). I thought this simple code would do the trick: import com.greensock.*; import com.greensock.easing.*; TweenMax.to(test, 2, {rotationY:90, ease:Linear.easeNone}); But now I see that the square doesn't exactly go to its side but rotates a bit further. If I use the following code it goed to exactly to its side: TweenMax.to(test, 2, {rotationY:86, ease:Linear.easeNone}); It seems there is some kind of descrepancy there. I first thought it had something to do with the Perspective Angle setting, but changing this value does not give a different result. Any suggestions what is going wrong here?
-
Hello everybody!!! I'm newbie in this forum and I have one question. I'm trying to animate a movieClip first in z-axis (e.g 45 degrees) and then in Y-axis (e.g.90 degrees). If I do only the one rotation its OK, TweenMax.to(cont, 1, {rotationZ:-45}); or TweenMax.to(cont, 1, {rotationY:90}); but when I'm trying to do first the one an then the second or both together like this TweenMax.to(cont, 1, {rotationZ:-45, rotationY:90}); I have a problem, the result is not what I expected to see. Did you have any idea?? Thanks in advance!!! p.s. I have attached a simple .fla & .swf file. rotationZY.zip
-min.thumb.png.e9b9ff661954360c5f1ce15c7f44e077.png)
