Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Dakota

  1. So thanks to the help I got I was able to extrapolate that example into some code that works really well for the interface. 


    I'm running into one problem though. It's not too bad, I actually might not change it if it is a real pain to code around but my elements transform to their finished position. But then they don't animate back to their original position. Now, i think this is due to how the PerspectiveTransform.js library (


    I'm wondering if there is an easier way.


    I do see that I can .reverse() a timeline but that won't really work here I don't think because each box has it's own timeline as needed and when you move from one box to the next some would need to animate to flat, some would need to animate from their current distorted position to a new distorted position.



    (might only work in webkit, this is all for a kiosk running in webkit on a Mac)


    Here is a jsfiddle, you really have to see this to understand how it works. It's not bad, quite snappy in fact, but I'd be curious if it is possible to smoothly animate each box back flat, and some from distorted to a new distortion. 




    some of the code in the jsFiddle has been simplified as far as the grid is concerned. This interface is actually more complicated than this reduced test. The grid can be dragged around and new tiles are added and old ones that are invisible are removed. They are all positioned absolutely instead of floated and they have text/icons and photo content within each box. Each one launches a modal interface that then lets the user play a video on another monitor in a separate browser window on a 55" TV. 

    • Like 1
  2. 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. 





    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;
        -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;
    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
    	        transform.update(); // update the perspective transform
    	        elem.style.display = "block"; // show the element
    	        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) {
    	TweenLite.to(obj, 0.2, {setDistortVal: endValX, ease: Power2.easeInOut});