Pin spacer is double the height it should be after window resize

[Dan_O]

Hi! I've been getting aquatinted with GSAP over the last couple of days (really loving it). I have successfully created the scroll triggered effects that I need – one for desktop & a second for mobile screens. As I said both are working correctly on their respective screens, however if you resize the window down past mobile breakpoint the "pin spacer" container div is double the size it should be & obvs everything is broken (after reloading the window it works again as you would expect).

 

As stated I'm new to GSAP so I'm assuming I making a rookie mistake but I can't seem to figure out what it be. I have successfully replicated the issue on stackblitz. Any suggestions on how I might resolve this would be greatly appreciated, cheers!!

 

https://stackblitz.com/edit/stackblitz-starters-vpso1o?file=components%2FThreePoints%2Findex.jsx

[GreenSock]

Nope, you weren't making a rookie mistake at all, @Dan_O. It looks like you exposed a bug that should be fixed in the next release which you can preview at:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Basically, if you create a gsap.matchMedia() inside a gsap.context() (which is what useGSAP() uses), the non-matching media queries may not get fully destroyed, thus they could get triggered again. In the meantime, it's easy to fix by just making sure you revert the MatchMedia in the cleanup function: 

return () => mm.revert();

https://stackblitz.com/edit/stackblitz-starters-zzqb8l?file=components%2FThreePoints%2Findex.jsx

 

Better? 

 

Sorry about any confusion there. 

[Dan_O]

Awesome, that makes complete sense. Thanks!