Hey guys,
I'm pretty sure I've stumbled on a bug here. I'm building a cube-gallery with TweenLite. The cube itself is transformed as are the 6 faces. (2 in this case, because i simplified it).
Here's my JS example:
// Setup props for cube and sides
TweenMax.set("#cube", { z: -100, transformOrigin: "center" });
// Use GSAP to set values (Matrix)
// TweenMax.set(document.querySelector(".top"), { rotationX: 90, z: 100 });
// TweenMax.set(document.querySelector(".front"), { z: 100 });
// Set values normally (rotateX, translateZ)
document.querySelector(".top").style.webkitTransform = "rotateX(90deg) translateZ(100px)";
document.querySelector(".front").style.webkitTransform = "translateZ(100px)";
TweenMax.to("#cube", 1.5, { rotationX: -90, yoyo: true, repeat: -1, ease: Power3.easeInOut });
Now, using rotateX and translateZ it works just fine (In webkit, I didn't write out the other prefixes), but if I switch to the GSAP version it breaks. I'm guessing this has to do with the Matrix that is being applied instead of translateX/translateZ.
Is there a way to force GSAP to not use the matrix? I think that would fix it for now, and i'd much prefer using the GSAP syntax.
I can't use CSS to transform the elements as they switch position when the "slider" updates. For instance, if there are only 2 slides it should move them around seamlessly to give the impression of a cube with 6 faces.
I put together a Codepen with a working example and the CSS I use:
http://codepen.io/Ahrengot/pen/kvaqA