timelinemax Refresh scroll-controlled timeline on matchMedia?

[janchristoph.schumm]

Hello again,

 

I'm trying to create a page, where the menu at first is displayed as a grid but gets shifted to a horizontally aligned top-menu-bar by scrolling.

I'm using the scroll-position to control the progress of the animation. That in itself is just working fine. However, there's one more thing I'm trying to include. I've already searched the forum for a clue, but it seems that I just can't get my head around it …

 

Whenever a certain aspect-ratio is met, the menu-items change their proportions – there are timelines for each aspect-ratio to create a smooth transition here . This again also affects the scroll-based animation. So, if I scrolled halfway through the animation, then resize the browser until the change happens, I'm able to tween the menu-items to where they should be based on the new aspect-ratio and the actual progress of the timeline. 

 

But if I continue scrolling from there, it always jumps back to the "old" proportions.

 

If someone could give me a hint on this, that'd be supernice!

Many thanks!!!

 

 

See the Pen gObrJxN?editors=0011 by studio-firm (@studio-firm) on CodePen

[ZachSaucier]

Hey Jan,

 

Try clearing the timeline before killing it: scrollTimeline.clear().kill();

See the Pen BayKXLx?editors=0010 by GreenSock (@GreenSock) on CodePen

[janchristoph.schumm]

Hey Zach,

 

thanks a lot for your suggestion, but it doesn't seem to do the trick.

The problem occurs when I scroll up just a bit and the scrollTimeline hasn't reached its final state.

 

When at this point I resize the browser to match the other aspect ratio and then continue scrolling, I want the menu-items to not jump to previous position/size, but to smoothly transition to the size/position, they would have at this point/progress on the timeline for this aspect ratio and then continue (by scrolling) from their new position/size to the final state in the scrollTimeline.

 

Pretty confusing! ? I hope, you can follow.

[ZachSaucier]

11 minutes ago, janchristoph.schumm said:

I want the menu-items to not jump to previous position/size, but to smoothly transition to the size/position

That's a bit more complex. 

 

I think it would be best to take a step back (and maybe even start from the beginning). Then

1. Get the scroll animations working exactly as you want them to be (including browser resize). If they are already like that, then great! If not, do that first before you worry about any sort of transition.
2. Once it is exactly the way you want it, you can transition between two timelines by checking the values of properties that are affected in each timeline, transitioning between their current value and the value you want them to be, and then (in my case below) playing the rest of the timeline from that point. For you it will be a bit more complex because you have multiple values you need to change. 

Here's a basic setup of how to do so, but you'll have to apply the technique to your project:

See the Pen mdyEbVQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It may or may not be worth your time to do this  Most users are ok with things just refreshing (no transition) if their browser is resized. It's almost always a conscious user decision to do so.

[OSUblake]

30 minutes ago, janchristoph.schumm said:

When at this point I resize the browser to match the other aspect ratio and then continue scrolling, I want the menu-items to not jump to previous position/size, but to smoothly transition to the size/position, they would have at this point/progress on the timeline for this aspect ratio and then continue (by scrolling) from their new position/size to the final state in the scrollTimeline.

 

When the browser resizes, the entire layout has to be recalculated, putting a lot of strain on the browser. Trying to have smooth transitions during a resize is a waste of time in my opinion. It adds nothing to the user experience, and normal users don't constantly resize their browsers like devs do. Can it be done? Sure, but it requires some careful programming.

[janchristoph.schumm]

Thanks so much for your superfast replies!

That's a huge help. I guess you're right … I might as well go without those smooth transitions on layout change.

 

The core idea behind all of this is that I will have variable typography in those menu-items and a timeline, that tweens font-stretch and font-weight. Progress is calculated in between certain aspect-ratios to make the the font fit whatever screen-size it is displayed on. This alone is actually working pretty well.