Updating to position with window resize

[TezzyBear]

Hi! Im currently trying to get an animation to move to the center of the screen like so:

gsap.to(animation, { x: window.innerWidth / 2, y: window.innerHeight / 2 });

However, when resizing the window mid animation... The to end position is not updated (this is what I expect to happen, I understand tweenTo vars are registered at the begining of the animation and arent updated mid animation). What would be the correct approach for the animation to update this value correctly? I was thinking of just setting (gsap.set()) the position on an updateTo callback within the tweenToVars but that just seems like doing all the work. Is there another solution?

 

[Toso]

hi @TezzyBear im not sure what you are trying to build here since there is no codepen demo to see your use case but maybe give a try quickTo and quickSetter , or just go lazy mode and add the tween inside an  eventListener for the resize

but still, it depends on your use case may be matchMedia can help you also 🤔 

 

I'm interested in what you are building that requires user resizing in the middle of the animation 

[TezzyBear]

Thanks for the help @Toso. My first solution involved handling the tween inside the event listener, resetting the tween, and setting the progress to that of my original tweens at the time of the resize. I just thought this was a bit messy. I'm sorry for not providing a CodePen, but I thought the question was straightforward! 

[akapowl]

 

Welcome to the GSAP Forum, @TezzyBear
 

1 hour ago, TezzyBear said:

Hi! Im currently trying to get an animation to move to the center of the screen like so:

gsap.to(animation, { x: window.innerWidth / 2, y: window.innerHeight / 2 });

However, when resizing the window mid animation... The to end position is not updated

 

One very simple way to achieve that the end position gets updated is to use vw/vh values for the x/y properties of your tween .

 

See the Pen OJdaewQ by akapowl (@akapowl) on CodePen

 

 

 

If you'd want to line up the center of your element to the center of the window, you could additionally also use xPercent/yPercent values on top of that.

See the Pen abXQgRv by akapowl (@akapowl) on CodePen

 

 

 

As  Toso already implied, it always helps to add a minimal demo to your question, so a) it becomes clearer what you actually intend to do and b) people willing to help don't have to go through the extra-steps of creating some themselves to show you what you could possibly do.

I hope that will help.

 

Edit:

If (for whatever reason) you can not use vw/vh values, another way to go about that would be to use function based values for your x/y properties, and in a resize eventListener function handle the progress of your tween and invalidate it, as suggested by OSUBlake in that older thread linked below, e.g.

 

See the Pen wvNQVaQ by akapowl (@akapowl) on CodePen

 

 

[TezzyBear]

@akapowl Thanks! This was exactly what I was looking for. I'm sorry for not providing a demo; I just wasn't sure what to include in it. I'll make sure to provide demos in the future.