Based on PointC's reply, this is now solved, what a feeling See below!
Now I strongly believe this should work, however it doesen't, but the console.log shows I'm right?! :S
The predefined value from PointC works to some extend, but the problem is I need this to be dynamic, I don't know ahead of time the 4 values of x, y, width, height, but the end result is the same, TweenMax just
doesen't seem to agree with me
Predefined console.log: "20 100 50 50" <- Works
Dynamic console.log: "20 100 50 50" <- Doesen't work ?!?!?!?!!
//// SOLVED /////
The above problem was caused by the " signs, now the console log shows the content of the attr as a string, but really they aren't,
so when I instead of focusing on placing real numbers within a string, did this:
var passerString = l + " " + t + " " + w + " " + h;
and NOT like this
var passerString = '"' + l + ' ' + t + ' ' + w + ' ' + h + '"';
It worked. (Dynamicly)
//////////////////////
$(document).ready(function() {
// TweenMax.js, jQUery.js, Skinny.js -> clientRect()
TweenMax.set("#theSVG", {xPercent:-50, left:"50%"});
var hasBeenClicked = false;
$('.tileBox').click(function(e) {
var element = $(this).clientRect();
var tween = TweenMax.to("#theSVG", 1, {
attr:{
viewBox:getValues(element)
},
paused:true,
ease:Sine.easeInOut
}).reverse();
tween.reversed() ? tween.play() : tween.reverse();
hasBeenClicked = true;
});
function getValues(element) {
var l = element.left;
var t = element.top;
var w = element.width;
var h = element.height;
//var passerString = '"' + l + ' ' + t + ' ' + w + ' ' + h + '"';
var passerString = l + " " + t + " " + w + " " + h;
console.log(passerString);
return passerString;
}
});
