TDT

@OSUblake Already minded. I swear that I have already tried this and didnt work. Thank you at all. @Jonathan Yes. But thats the point, I was comparing the GSAP set() method behavior against CSS ones thourgh jQuery css() method. With CSS the element stay on the position that I want as I wrote the transform order: first scale, later translate. With GSAP the element wasnt staying on same position because it handle the parameteres and put in own order: first translate, later matrix (to scale).

After read on and on again your code and answer, I understood. You always set translate before scale to get identical effects, because GSAP uses this way. The problem here is that I'm applying this on window resize and the element (btw its an image) needs to be in the same position relative to the background (that also resizes). When I use translate before scale, the translate values are fixed because I use "translate-origin: top left", and only scale I calculate base on viewport width. Here is my code pen: http://codepen.io/anon/pen/epKedM I forked your example change the div for imgs, where one of these is background. Also notice "position: absolute" and "top:" 0 on all elements. Look that green and blue are not positioned at the same X and Y coordinates. Our reference is the leaf tip. Now resize the window. Look that green one works as I expect, becoming at the same X and Y coordinates proportional to before, in other words, on the leaf tip. But blue don't, since translate is applyed before scale. How can I solve this? Once that GSAP uses translate before scale.

If I use the folowing code through jQuery: $('.logo').css('transform', 'scale('+ (maxvw / 1920) + ') translateX(36%) translateY(41%)'); The CSS is applyed and everything is ok. The logo is scaled on X and Y, and then image is positioned where I want. Perhaps I need to set this through TweenMax for browser compatibility, since it translates to -all-browser prefixes, and even works on IE older versions. Then I'm using this: TweenMax.set('.logo', {scale: (maxvw / 1920), x: '36%', y: '41%'}); The problem is that GSAP is converting "scale" property to "matrix", and the inline style is something like this: transform: translate(36%, 41%) matrix(0.658854, 0, 0, 0.658854, 0, 0); Look that property X and Y was correct setted, but matrix comes later, with 0 (zero) on X and Y and not position my element on 36% and 41% as I expected. Why this happens? Which format should I use or it's a bug?

Hello Jack, Thank you it works. I was testing on "onUpdate" eventCallback and that was what was bugging. Nevermind. Once I put it on window resize it works. The funny thing is that I will not use this, because the animation was ugly hehehe. If the guy start with a window at X width, resume the animation forward, then resize the window, now the width is Y, and he resumes the animation forward, then resize the window again back to X width, and resume the animation backward, the backgroundPosition animation will be ugly xD But thanks at all, probably I'll fix this animation on some pixels without checking the viewport width At least I learn one thing more Thank you again.

Hi, thank you but I cant use .set, because I need to animate the current animation, not set another one. Maybe updateTo, or .vars as GreenSock answer. The tween is for N animations inside a "for" loop. That's why I didnt have the Tween reference in JavaScript. I think that will not be elegant to maintain a variable for each object, even if is an array. I tried to get the tween reference from the DOM element with TweenMax.getTweensOf("#id"), look for the Tween that want to change, but when I change the backgroundPosition property nothing happens. This does not update the tween I need to do this only by javascript variable reference that I need to save? Another problem is that I cant simple invalidate(), because I'm using ScrollMagic, if the scroll is on 50%, for example, the animation will be on 50%, so if I invalidate it it will be again on 0% and the scroll will tottaly bug the animation. ScrollMagic has an example for a thing like that, but he uses a JavaScript reference for the Tween and for the Scene see that on: http://janpaepke.github.io/ScrollMagic/examples/expert/manipulating_tweens.html Thank you for answers, I'm still trying to solve this.

I'm animating the backgroundPosition from a div based on 50% of viewport width. Since not all browsers support vw units, I need to create a global variable that is updated when window resizes, getting the viewport width in pixels, divide it by 2, and then give this value to the animation. The Tween that animates the backgroundPosition is inside a big timeline. I dont have the JavaScript's reference's variable of Tween, nor of Timeline. How can I update the backgroundPosition with the new value get by JavaScript when the window resizes? I guess that is also important to tell that this animation is triggered by scrolling the page using ScrollMagic plugin. I'm using a fixed duration. What I need is something like dynamicProps Plugin from GSAP Flash. Thank you for read.