How to update tween variable on window resize.

[rajnibkakadiya@gmail.com]

I want to update a tween variable as per window's width on window resize. I have tried with below code but it seems not working. Could you please help me?

var logoWidth = 100;

window.onresize = function(){
	logoWidth = (window.innerWidth > 767) ? 100 : 50;
}

var _timeline = new TimelineMax();

_timeline.to(element, 1, {width:logoWidth});

Any help appreciated!

[Diaco]

Hi rajnibkakadiya 

 

your answer's here :

 

http://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax/

[Raynor]

There's the similar question that I wanted to ask, I think it will be OK to ask it here.
I' trying to make GSAP animations work properly with responsive design.

Let's say I have a responsive DOM element with height measured in vh or % rather then pixels. Then I tween its height with GSAP.

 

The problem is, if I understand it right, initial CSS values get recorded only once when the tween is created.

So, if I zoom page (and element's height is scaled proportionally by browser) and then restart animation again, GSAP will still tween to initial height than was recorded when page was unzoomed.

 

I could try to use 'on resize' event to re-create the tween each time the window is resized, but it seems to be cumbersome and inefficient (resize events come very often and in fact i only need to re-record CSS properties once when resizing is over). 
Is there more elegent solution, maybe some method to renew initial values each time the tween starts?

 

JQuery slide() doesn't have this problem but i don't know exactly how the things are put together inside it to reproduce its behaviour.

[Jonathan]

Hello Raynor, and Welcoem to the GreenSock Forum!

 

I would look into GSAP xPercent and yPercent properties

 

Check out this GreenSock Blog post about GSAP and Responsive Design:

 

http://greensock.com/gsap-1-13-1

 

Also check out the CSSPlugin Docs for info on xPercent and yPercent:

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

 

i hope this helps.

[Carl]

Hi Raynor,

 

If you are tweening the height of an element as a percentage you don't need to re-record values or re-create tweens at all.

http://codepen.io/GreenSock/full/yybgBq/

 

If you are referring to another use-case, please provide a little demo so that we have something to work with. Thanks

[Raynor]

Thanks Jonathan!
xPercent and yPercent are really cool and thay do help in some situations, but they are for translations only. And what is often needed (in my case also) is to change property (height) of the element, not just shove it somewhere off the screen (well, it might pass as a workaround, but its not the way i want it and this solution is not universal).

 

OK, I think codepen is needed here

[Jonathan]

Raynor..

See the Pen yybgBq by GreenSock (@GreenSock) on CodePen

shows how you wouldn't need to change height on resize.

 

Also xPercent and yPercent just don't work for transitions. You could also use it statically using the GSAP set() method:

:

TweenMax.set(".box", {xPercent:-50, yPercent:-50});

:

Info on the GSAP set() method found here.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

• set()
  Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

:

[Raynor]

Well, it turned to be a challenge to properly reproduce this problem on codepen  

See the Pen emWgZX by anon (@anon) on CodePen

 

I have a rather complicated situation where element's height is not set directly in CSS, but depends on content (text font-size, that is also adaptive). You can set font-size in the .box class and menu height will change automatically. Moreover, some flexbox magic is involved,and I kept it there just to give you easy way to reproduce the problem.

 

So, to see what I mean:

1. adjust your window size so that 'flex-wrap' comes into action and you see blue boxes above each other.

2. Press 'click here to slide' to play the animation.

3. resize your window in a way when blue boxes are horizontally aligned and red element height is twice smaller.

4. Play animation again. You'll see that it starts from the place where the red element ended last time (before resize).

 

One more thing: it seems that problem exists only for 'timeline' setup. If you omit timeline and put the tween directly inside 'on click' event, everything works fine without timeline.

[Rodrigo]

Hi,

 

Well, basically this happens at a specific screen width and not in every resize event, that's a more complicated scenario. For this case the thread's link provided by Diaco should be enough. In that thread Blake shared a really solid approach for something like this, basically is integrating JS with media queries, and when the breakpoint is reached, you can execute the code to remove the particular instance from the timeline and add it again (in this case a label can be super useful).

 

http://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax/

 

Now the reason why it works as expected by instantiating the Tween on the click event, is because if you click after the window dimensions have changed (the most logical use case), a new Tween is created every time, therefore collecting and recording the right values.

 

Rodrigo.

[Raynor]

Hi Rodrigo! Thanks for participating.
 

I said above, that design is made so that menu (red element) size depends on the font-size, and font-size itself is responsive. It changes when you zoom or resize browser window and therefore target element height changes too, which causes this problem with animation. I just haven't included font-scaling script for simplicity, maybe I should have done that.  The script is not based on media-queries; font-size (and element height) are changed smoothly, so literally any resize event produces a little discrepancy (for now, you cannot see that on codepen, but if you want, I will add the script to show you). But the problem is the same like the one you get with the steps I described above.

 

Besides that,  I try not to use media queries every other time when I can avoid it.   In this case JQuery slider() method which I have used previously worked fine without them, so I hope it is achievanble with GSAP too.

 

Single tween certainly works for the reasons you described, but I need timeline (there's some more animations that must be going on in sequence, such as setting overflow and visibility properties)

[Carl]

Did you try tweening to height:"0%" to force % as the units? Otherwise px values will be used.

[Raynor]

I tried, but in this case it doesn't even work properly from the start. With font-size 16px, according to FireBug compiled style height for menu block is 51px.

If I set height to "0%", it goes tweening height from 0% to 11.6% of parent container, which is approximately 89px .
I'm not sure why this happens, but suspect it's because menu block itself is one of the elements in the parent flex-container, and somehow it impedes GSAP from determining initial height correctly. If needed I can create more detailed Codepen where you could be able to observe all this side-effects.
 

But actually I found the solution to this problem: it was as easy as invalidate() timeline onReverseComplete. All ingenious is simple