Search the Community
Showing results for tags 'translatez'.
Found 7 results
-
Hi, Anyone got any ideas as to why this doesn't work? CSS version is correct, GSAP is not. z:200 is not doing anything? gsap.to(box1, { duration: 2, x: 200, z: 200, // Not working?? rotationY: 360, backgroundColor: "#000000", color: "#FFFFFF" }); Thanks D
-
Hello, I'm trying to animate a series of objects so that they pass behind and then in front of another object. It works as expected in Safari, but not in either Chrome or Firefox (all on OS X). They seem to obey the DOM order instead. It's basically the same problem described here. I've tried everything suggested in the comments there, but it's still only working in Safari. In the Codepen, I've also included a static object to illustrate that the stacking isn't working as desired. Does anyone have any ideas what's wrong? Thanks, Scott
-
Hi I have 2 cards here with the the same HTML, CSS and JavaScript, there is an element which has mix-blend-mode property between them, the second one is not working as it should!! I want to have that element there! Why it is not working?!!
-
Hello, I am using the Greensock Draggable as a container with several child elements. Now the css translate3d(Npx, Npx, 0px) is added to the the Draggable. But the translateZ 0px causes every child element to be blured. When I overwrite it with Developer Tools to 1px the elements arent blured anymore. Is there a way to permanently add translateZ(1px)?
-
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 folks, I've been googling this to death and can't figure out why I can't set the Z position of these divs using TweenLite (which is writing translateZ transforms, so presumably that way, either). Any help, taking a look at the plnkr here? http://plnkr.co/edit/OKIzzKlNv7yJVVHlraCR See the _setLayoutTargets function and _moveEm function...
-
Hey TweenMaxers, Was futzin around and prototyped up a 3d carousel (http://codepen.io/johnblazek/full/nceyw, also using on my personal site) that works well in Webkit, followed by Safari and maybe IE10 (it doesn't work on my VM) Noticed a couple things happening when I tried to animate on the Z axis. 1. In lines 60-64 in the JS, I'm defaulting to use the vendor prefixes in order to get translateZ to show true perspective. Tried using this code: TweenMax.set($item, { rotationY: rY * i, z:radius }), but throws some weird positions when used. 2. The other weird thing is if you reference line 103 and 104, you'll notice I broke them up into 2 calls, one, a "to," and the other a "set" because when I tried combining them and animate the z axis along with rotation X and Y, once you go past rotation Y -90 degrees and 90 degrees, it spazzes out. Any ideas?
