How to Dynamically update GSAP Scale values in a FromTo based on screen resize

[MexicoNewZealand]

Hello!

 

Im having trouble dynamically updating the value of the endScale, currently it is 0.2; but i am after an effect where the scale updates and changes based on window resize function(). I have tried implementing this but unfortunately having a few troubles.

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen.

[SteveS]

Could you describe the desired effect?

I don't believe you can update a tween in the middle of its running, but you can replace it. However, if you don't need to update it while it is running, you can use a quicksetter in a window resize event function.

[GreenSock]

I would highly recommend checking out the new matchMedia() functionality in 3.11: 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Also, it’s far better to use the transform shortcuts like scale, x, y, rotation, etc. than using “transform” strings like that. Faster and more accurate. 

And yeah, you could have a tween and then in a “resize” event just record the progress of that tween, kill() it, create a new one to the new destination value and set its progress to that recorded value. 

[MexicoNewZealand]

43 minutes ago, GreenSock said:

I would highly recommend checking out the new matchMedia() functionality in 3.11: 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Also, it’s far better to use the transform shortcuts like scale, x, y, rotation, etc. than using “transform” strings like that. Faster and more accurate. 

And yeah, you could have a tween and then in a “resize” event just record the progress of that tween, kill() it, create a new one to the new destination value and set its progress to that recorded value. 

Hi Jack, thank you killing the tween and creating a new one solved the issue.