Search the Community
Showing results for tags '3d transform'.
Found 8 results
-
I've been working on reproducing one of my favorite card games in JavaScript and I'm having some problems getting the 3d rotations to work the way I'd like. I'm using TweenLite to flip the cards' divs with rotationX and rotationY, but I can't figure out how to tell when I need to swap out the front and back of the card. Is there a way to detect which side of the card is visible? I've seen it done with CSS like this: http://davidwalsh.name/css-flip, but 'backface-visibility: hidden' doesn't seem to affect objects that are rotated with TweenLite.
-
Hi there, I am trying to make 3 divs fold out from under one another and was going quite well until i noticed that the divs are sort of flickering when they get to the end of their transitions. Any help is appreciated! Thanks, Phil
-
Hello, I have a task to animate an SVG (simplified map of a city), where road signs are part of the presentation. Everything goes quite smoothly with GreenSock (drawing SVG lines, rotating the whole image, etc.), but I cannot get the last part to work as intended: the small signs should always face the screen (the camera), while the whole SVG rotates in 3D, and the signs follow the path set by the parent rotation (and other tweens). Something like this image: My idea was to rotate them in the exact opposite direction as their parent goes (and the animation should last the same amount of time), but this does not work (except for the Z axis, where it does what is planned). The codepen has the full SVG (it's quite large), the JS code that I tried to use (and some CSS only so the image can be seen). Has anybody any idea how to achieve this effect? (Or is it possible at all with CSS / GreenSock animation? Thank you in advance, Gergő
-
Hi, Can you help me to explain the reason why rotationX or rotationY 3D transforms are not applied to children elements of SVG (rect, circ)? This issue manifests itself only in Safari (Mac Safari version 8.0.5 (10600.5.17)) and Mobile Safari (iOS 8.3) AND only in GSAP TweenMax.js version 1.16.1 (linked from CDN or locally). View this Codepen example in Safari: http://codepen.io/Dima-L/pen/ZGGKqz – notice the linked cdn js file (//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js) Here is an identical code where rotationY/X 3D transforms ARE applied: http://codepen.io/Dima-L/pen/ZGGKqz – the only difference from above is that here linked TweenMax.min.js is version 1.14.2 Is this in fact an issue with TweenMax.js 1.16.1 or is my setup wrong? -
Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks
-
I am trying to animate 2 elements that exist on top of each other, but are rotated 180 degrees to form a card with a back and a front. After the animation completes the elements are blurry. This is what the css transform is upon inspection: transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); When I adjust the -0.002 to be 0 in the inspector, voila! The element is crisp and clear. Here is the code I am using to animated the elements (node is the element) animateIn: function() { TweenLite.to(node, .3, {opacity: 1, rotationY: 0, ease: Linear.easeNone}); } animateOut: function() { TweenLite.to(node, .3, {opacity: 0, rotationY: -180, ease: Linear.easeNone}); } Is the animation just not completing? Any insight as to how to fix this? NOTE: I've included a codepen url of the exact effect I am trying to achieve, and one where the rotation animations successfully complete. When they work I imagine transform: matrix(1, 0, 0, 1, 0, 0); is what will be applied to the style attribute. Thanks, Zach -
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 am attempting to create more 'depth' in a 3d transform to match a CSS transform I currently use. The current greensock transform renders more as a flat card flip than a cube rotate. I have set up a CodePen sample of both the CSS transform and corresponding GreenSock transform side by side. I'm looking to make the greensock version have the same depth as the css version. I'm thinking I need to get some 'skew' properties involved but I am getting no where. Any ideas? Thanks in advance.. (note: I've only have this pen set up for FF to simplify the code) http://codepen.io/stevenmross/pen/jkwHq
