gsap.matchMedia() How to exclude a tween from timeline if mobile

[Its_Lefty]

Hi there!

I am currently trying out the new gsap.matchMedia() (thanks for releasing this!).

I have trouble understanding how to use it in my timeline (since I'm really bad with JS): If you click on the toggle a menu and a post-list will appear.

On mobile I don't need the post-list stagger-animation because I am going to hide the element completely. How can I exclude the .posts li span from the tween on the given breakpoint?

Before, I was using 2 separate timelines with mm.add("(min-width: 992px)", () => { and mm.add("(max-width: 991px)", () => { but it felt like a overkill because just this one tween is different.

 

Thanks in advance!

See the Pen VwdjXZO by ItsLefty (@ItsLefty) on CodePen

[mvaneijgen]

I've created a separate variable with only the mobile items and set that as the target elements on mobile. I had o rewatch the amazing video on the docs, but that should do it right?

 

See the Pen MWXeBbQ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Its_Lefty]

Awesome, thanks a lot!
Just another question: If I open the overlay and resize the window below 992 Px GSAP resets the values to the default state so that the overlay is not longer visible. This is also mentioned in the video at 7:50 (although it's a different scenario here). Is there a way to always keep the overlay opened until it is closed by the button? Do I maybe need the return () => {  cleanup function here?

[mvaneijgen]

Oh, I don't know. I do know that normal people don't keep resizing their browser that is only something developers do. 

[GreenSock]

Here's a strategy you could employ: 

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

 

Does that help? 

[Its_Lefty]

Yes, thank you very much! I've never used labels before so I'm trying to understand the code. Just one last issue: Now the menu and post items are starting at the same time. Before each of them were staggered one by one.
I've tried it by putting your tl.add("stagger"); below the tl.fromTo(".menu li span", { 

 

See the Pen zYaBepd by ItsLefty (@ItsLefty) on CodePen

 

Now it is working again. But if you resize the opened overlay to the small breakpoint and close it, the post items still have a staggering animation which is not needed. Is it possible to fix this, too? If this is too difficult, no problem though.  I agree to @mvaneijgen that normal people won't resize and click like that.

[GreenSock]

8 hours ago, Its_Lefty said:

Just one last issue: Now the menu and post items are starting at the same time. Before each of them were staggered one by one.

Sure, that's easy with the position parameter: 

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

 

8 hours ago, Its_Lefty said:

But if you resize the opened overlay to the small breakpoint and close it, the post items still have a staggering animation which is not needed. Is it possible to fix this, too?

I'm confused - on smaller screens you want to have no staggering whatsoever anywhere? So a totally different animation where all the elements animate in/out at the same time? 

[Its_Lefty]

Great, thanks! No, I want to keep the staggering, your pen is like I expected it to be. I mean only that there is a delay of the reverted timeline due to the staggered post items. Let me try to explain: If you open the overlay on desktop, resize the window and close the overlay, post 1, post 2, etc. are still in the timeline animation although they are not visible so that you are going to have a delay until the menu items are staggering back. Hard to explain and english is not my native language. So I guess I need something like a resize event.
This is not important though because almost no person will click like that.

[GreenSock]

Then you could just force the progress() in the cleanup function: 

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

[Its_Lefty]

Perfect, thanks a lot, GSAP is the best.