Search the Community
Showing results for tags 'rotationx'.
-
Hi, I have a card game which currently handles the cards dragging by simply editing the rotationX and rotationY depending on the mouse movement direction. Then in the onEnter loop I "force" the rotationX and rotationY to move towards 0 by slightly increasing/decreasing their value on each frame. This results in a quite poor 3D effect movement since the transition isn't smooth enough, plus it doesn't feel like a 3D transition (since it's obviously only 2D). We are using plain Flash for this, so no CSS or JS can be involved, we only use GSAP tweens. Our aim, is to create something like hearthstone achieved, a very smooth movement which depends on the position of the mouse-center of the card, as implemented here by @dstnation. We do handle the smooth transition of the card from its position to the mouse cursor by using just one line of code on the 'onEnter' function, basically: protected function onEnterFrame(e:Event):void { if(mMouseTarget && mMouseDown) { //Handle the position of the card 'x' and 'y' TweenLite.to(this, 0.2, {x:mMouseTarget.x, y:mMouseTarget.y}); } } mMouseTarget's position is filled on the onMouseDown, along with the mMouseDown variable. We are nevertheless, having a hard time trying to figure out how to do something similar with the rotationX, rotationY and (perhaps?) skewX/skewY to achieve a 3D effect? Does anyone have any idea on what could we try? Thanks beforehand
-
Hello Everybody I'm experimenting with tweening CSS classes containing 3d transforms. It works very well in most cases but I’m stuck with the getting rotations into the right direction. I wish the “DirectionalRotationPlugin” would help me out here. But I wouldn’t like to set the target values via JavaScript. Please click the door in my pen to see what I mean and check the CSS class “.open”. Maybe it is a pure CSS problem. Any advice is very welcome. Henry
- 4 replies
-
- directionalrotationplugin
- classname
-
(and 1 more)
Tagged with:
-
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.
-
I think my issue is with rotationX. Is there a trick to getting rotationX with an SVG to work in Safari and Firefox? My codepen is linked. Thanks
-
Hello I'm using rotationX on a png. I only see half the png on rotation. When it stops I see the whole image. See something missing in the code? Thanks TweenLite.set(pie, {perspective:800, transformPerspective:800}); var tl; tl = new TimelineLite({}); tl.to(pie, .5, {autoAlpha:1, immediateRender:false}) .from(pie, 1.5, {x:"-=100", scale:1.5, rotationX: 90, transformOrigin:"left center", ease:Power2.easeInOut}, "-=.5")
-
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!!
-
Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
- 28 replies
-
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
-
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
-
One co-worker has done these animation flips. TweenLite.to(banner_box_7, .18, { rotationX: banner_flip_dgr, transformOrigin: banner_fliptype, ease:banner_flip_ease_in, ....... And we get these pixel lines stuck (only sometimes on firefox only) First image is before animation, later is in mid animation and you can see 1px lines getting stuck. Anyone who know what can cause this. ** Update ** I know what caused this, it´s a bug in current Firefox version https://bugzilla.mozilla.org/show_bug.cgi?id=505115 moderator can close this thread.
-
Hey guys, I was playing with the sample here http://codepen.io/GreenSock/pen/yzahJ and forked it to this http://codepen.io/SnapToPixels/pen/zvGos When you rotate on the Y the origin is from the center When you rotate on the X the origin is from the top How can I get it to rotate the X and have the origin be the center? Thanks guys - P