ScrollTrigger.matchMedia() not killing animations?

[NickWoodward]

I think I must be fundamentally missing something with the matchMedia function:

I'm not using it for scroll trigger animations, but it works for different non-Scroll animations at different screen sizes, which is great 🙂. Problem is, if I resize the window the previous animation is still active, despite the teardown return function being called.
 

What have I missed? 🤷‍♂️

See the Pen mdMzpVZ?editors=1111 by nwoodward (@nwoodward) on CodePen

[GreenSock]

ScrollTrigger.matchMedia() is only for automatically killing/segregating ScrollTrigger-related stuff - it does NOT manage all your non-ScrollTrigger animations. You'd need to do your own cleanup of those if they're not using ScrollTriggers at all. 

[NickWoodward]

Hi Jack,

Thanks for the reply. I guess I'll have to look into doing it manually

Out of interest, don't the docs suggest you can use it for that purpose, or have I misunderstood them?
 

Quote

Teardown function

You can [optionally] return a function which will be called when that breakpoint no longer matches so that you can do custom cleanup routines like killing other animations that aren't ScrollTrigger-related.

Either way, I take it then that I should clear up/kill the other animations in each media function?

[GreenSock]

Ah, now that I looked at your code, I see the main issue - it's a logic problem in your code:

You assign item.animation = animation only the first time through your loop. But then when the matchMedia() calls change, you never re-assign that, so from that point on it's trying to control an old/stale/killed animation! 

 

Also, it's generally best to just have ONE ScrollTrigger.matchMedia() call with your various breakpoints in there. It still seems to work fine when you have multiples, but that strikes me as wasteful and confusing. You should also do the .saveStyles() call initially before any tween-related inline styles may get applied. In your version, you keep calling .saveStyles() over and over again with each matchMedia.

 

So I think you meant to do something more like this: 

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

 

9 hours ago, NickWoodward said:

Out of interest, don't the docs suggest you can use it for that purpose, or have I misunderstood them?

Sure you can use them for that purpose. 

[NickWoodward]

4 hours ago, GreenSock said:

Ah, now that I looked at your code, I see the main issue - it's a logic problem in your code:

You assign item.animation = animation only the first time through your loop. But then when the matchMedia() calls change, you never re-assign that, so from that point on it's trying to control an old/stale/killed animation!

 

Ah, makes sense. Yeah this now works, thanks!

    "(max-width:999px)": function() {
      animation = gsap.timeline({ paused: true });
      animation.fromTo(item, { height: '0' }, { height: contentHeight });
      
      item.animation = animation;

      return function() {
        animation.kill();
        console.log('kill it max-width');
      }
    },

---

 

4 hours ago, GreenSock said:

Also, it's generally best to just have ONE ScrollTrigger.matchMedia() call with your various breakpoints in there. It still seems to work fine when you have multiples, but that strikes me as wasteful and confusing.

You mean because I've got one ScrollTrigger.matchMedia() call per menu item?
 

headers.forEach(header => {
  const item = header.nextElementSibling;
  addAnimation(item); // Because ScrollTrigger.matchMedia() is called from here?
  
  header.addEventListener('click', () => {
    // snip
  });
});

I'm trying to pull the matchMedia() call out of the loop, but the animations themselves refer to each individual menu item and its height, so I'm struggling to work out the logic of this. Will keep working on it, just wanted to check I understood you correctly!

 

---

 

5 hours ago, GreenSock said:

you keep calling .saveStyles() over and over again with each matchMedia.

I think this was another case of me misunderstanding the docs, this part:

 

// if you put this INSIDE one of the functions, it'll only revert the recorded elements when that media query no longer matches.

I did initially have the saveStyles() calls outside of matchMedia() function. I think I was desperately trying anything I could before I realised it wasn't css styles that were my problem 😄


Thanks a lot for your help, really appreciate it!

Nick

[GreenSock]

11 hours ago, NickWoodward said:

I'm trying to pull the matchMedia() call out of the loop, but the animations themselves refer to each individual menu item and its height, so I'm struggling to work out the logic of this. Will keep working on it, just wanted to check I understood you correctly!

It's probably okay to leave it if you prefer that, but here's a different approach that just uses one .matchMedia() call:

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

[NickWoodward]

Ah, nice. Funny how obvious it is when you see someone else's approach.

Thanks a lot for your help!