Greetings,
I have a TweenMax that is has x initialized to 1332px. It's a simple animation from left to right along a 1332px long div.
var tl2 = TweenMax.to(document.getElementById('point'), 1.5, {
//x:0,
y: 0,
//repeat: 1,
//onRepeat: playSound,
yoyo: true,
repeatDelay: 0,
ease: Power0.easeNone,
paused: true
});
x gets set dynamically based on width of screen.
At some point i'm rotating the div within which it runs by about 20 degrees so it can run from bottom left to upper right corner.
To do than I'm trying to 1424px (just for the sake of argument, that's what I'm getting on one particular laptop):
var pwa = $('.pointWorkArea');
pwa.css({
'width' : someCrossLengthInPX /* change the width of div where animation runs */
})
.css({
'transform' : 'rotate(' + eyeBaller.settings.crossAngle + 'deg)'
}).css({'left' : -pwa.position().left});
tl2.updateTo({ x : someCrossLengthInPX });
... however, I'm not seeing the change in DISTANCE the animation runs at. It rotates fine, but keeps running at the old side to side distance and not corner to corner.
Any ideas?