Search the Community

Hello greensock community. I wonder If it is possible to animate elemets with matrix3d. I want to have effect like this(https://www.krollstudio.com/),when you scroll the elemets come forward. They are using matrix3d and I could not do the same with the gsap. Help me If you can

Hello GreenSock, I'm having a problem which is described here, but wasn't actually solved in terms of why it doesn't get the correct matrix3d values: https://greensock.com/forums/topic/13986-tweening-directly-to-a-specific-matrix3d-transform/ This is what the matrix is set to: matrix3d(0.613582, -0.090278754224, 0, -0.00205016, -0.211713, 0.7803832528079999, 0, -0.00323228, 0, 0, 1, 0, 0, 0, 0, 1) And this is how it's supposed to look: This is what results (using force3d:true): matrix3d(0.613584, -0.0902806, 0, 0, -0.21171, 0.780381, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) Here's a Fiddle (CodePen wasn't working as it didn't want to save for some reason): https://jsfiddle.net/6agx0pL8/ Just like the forum poster I linked to, I was using PerspectiveTransform.js to get to this matrix3d. Am I missing something, or is this actually a bug or missing feature?

Hi all! I'm having a bit of a weird situation. I'm creating a fake scrollbar with Draggable that moves its target's scrollTop position as the scrollbar moves. I've got this working like a charm, except for one hiccup... IE is returning different values for the scrollbar's transform CSS value than Chrome/Firefox are. For example, Chrome/Firefox are returning something like matrix(1, 0, 0, 1, 0, 5), while IE is returning matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5, 0, 1). In order to get my scrollbar contraption to work, I need to listen for/get the Y value of the scrollbar's transform property and respectively set the target div's scrollTop position through a formula using that same Y value. This is proving to be a bit tricky as I need to parse and return different positions for IE (position 13) and Chrome/Firefox (position 5). I suppose my question is this: could someone shed some light onto why IE is returning a matrix3d value while Chrome/Firefox are returning just a regular matrix value for the draggable? Right now I'm using some browser sniffing to get it all to work, but I'd really rather not if I don't have to. Please let me know if setting up a Codepen would help better illustrate this situation. 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

Hello Everyone, I put together a codepen example showing 3 boxes rotating in the Y axis. Green box uses rotationY Red box uses transform: rotateY() Blue box uses transform: rotate3d() Example: http://codepen.io/jonathan/pen/Kgmtn If you look at the red box, and inspect that elements code, you will see how the red box is using matrix3d() instead of the simple transform rotateY() Is there something im missing to why matrix3d() is being used? Is there a way to force GSAP to use the simple transform rotateY() transform function instead of matrix / matrix3d? Thanks again for any help?

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

Hi there, I'm new to GSAP and am trying to evaluate it for some animations for a project I'm working on. I found some examples of using tweenlite to animate a custom property and was able to create a test that does this. I'm not sure how or if I can extrapolate that concept into animating multiple values at the same time with one tweenlite call. What I'm doing is animating a square box with a Matrix3D transform. (this only needs to work in webkit) To calculate the Matrix3D transform I'm using a handy bit of Javascript called PerspectiveTransform.js (https://github.com/edankwan/PerspectiveTransform.js) where I can pass the width & height of my element, and specify x&y coordinates for all four corners of the element. The script then calculates the Matrix3D transform required to distort the element to those new coordinates. I have a jsfiddle example that illustrates this. The first box has a Matrix3d transform applied showing the desired result. In this test the bottom right corner is moved from 250,250 to 220,220. I found examples on these forums that let me figure out how to animate that by creating an object with set/get functions. I need to figure out if I can do the same but for the "y" coordinate of that bottom right corner as well at the same time. I can only call the transform function once per frame of the animation because it generates a matrix3d transform for the whole element...not just a corner. In the end I'll actually have to animate all 4 corners of the element for a total of 8 coordinates. http://jsfiddle.net/jhBYw/1/ If anyone can help and tell me if this is even possible with GSAP or if there is a better way to do this I would greatly appreciate it. I know it is has been done: http://www.is-real.net/experiments/css3/wonder-webkit/ <div class="box1"></div> <div class="box2"></div> <a href="#">run</a> .box1 { background: blue; width:250px; height:250px; -webkit-transform:matrix3d(0.956521739, -0.043478261, 0, 0.000347826, -0.043478261, 0.956521739, 0, 0.000347826, 0, 0, 1, 0, 0, 0, 0, 1); } .box2 { background: blue; width:250px; height:250px; } function transformPerspective(elem, br_x, br_y) { var transform = new PerspectiveTransform(elem, 250, 250, true); // the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight" transform.bottomRight.x = br_x; transform.bottomRight.y = br_y; // check the polygon error before updating if(transform.checkError()==0){ transform.update(); // update the perspective transform elem.style.display = "block"; // show the element }else{ elem.style.display = "none"; // hide the element } } var box = $('.box2').get(0); var endValX = 220; var currValX = 250; obj = {}; obj.getDistortVal = function() { return parseInt(currValX); }; obj.setDistortVal = function(new_x) { currVal = parseInt(new_x); transformPerspective(box,currVal, 250); }; var animate = function(e) { e.preventDefault(); TweenLite.to(obj, 0.2, {setDistortVal: endValX, ease: Power2.easeInOut}); }; $('a').on('click',animate);