gsap.matchMedia not removing pin

[Vivodionisio]

Hi, 

I'm having a little trouble. I have two implementations of a carousel for desktop and mobile created using GSAP's match media method. The desktop version pins the section with scrollTrigger and scrubs through an animation whilst the other uses Observer to trigger to trigger the animation. The issue is that the Pinned element remains pinned when going from desktop to mobile which shouldn't be pinned. It only occurs however when the play head is midway through the animation*. I'm confused though, because it's my understanding that the pin should be killed off when the media query no longer applies? I was wondering, if anyone might be able to point me to sources related to this kind of issue? 

 

Many thanks!

Edited May 9, 2023 by Vivodionisio
*

[Rodrigo]

Hi,

 

Is really hard for us to debug without a minimal demo.

 

The only advice I can offer is to not use the conditions syntax and use two different add() methods in order to effectively revert the animations between screen sizes:

let mm = gsap.matchMedia();

mm.add("(min-width: 800px)", () => {
  // desktop setup code here...
});

mm.add("(max-width: 799px)", () => {
  // mobile setup code here...
});

Here is the link to the MatchMedia docs:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

If you keep having issues, please post a minimal simple demo that clearly illustrates the problem.

 

Happy Tweening!

[Vivodionisio]

Hi Rodrigo,

Thanks for the swift reply!

The component I'm working on is a convoluted beast. I have to figure out a way to simplify it. Fortunately I've managed to solve the issue I was having by removing a set() which defined the height of a spacer div (that followed the pinned element), and instead define its height in the style sheet. I have no idea why that's worked at this point. No matter, I have another issue for which I've managed to put together a minimal demo. It's a bit different so I'll start a new topic. 

 

Thanks again!