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);
