use matchMedia with scrolltrigger 'pin' in nuxt3, will get error after breakpoint change.

[Jeff840108]

I create a simple demo for this issue.
https://stackblitz.com/edit/nuxt-starter-nsqfvz?file=pages/index.vue

I use scrollTrigger in gsap.matchMedia(),
1. if I add the "pin" in home page (pages/index.vue),
2. and then go to other pages (pages/page2.vue)
3. resize with different breakpoint

it will show this kind of error, 

• Uncaught TypeError: trigger.revert is not a functio

 

 

After I back to the home page, the scrollTrigger will not work anymore.

And seems the scrollTrigger should be killed in "onUnmounted" ?


 

Thank you~~~

[Rodrigo]

Hi,

 

The method is revert() not kill() for GSAP MatchMedia and Context instances:

onUnmounted(() => {
  ctx.value.revert();
});

Also you can use ctx as a variable and not a ref if you want as well. This should work as well:

let ctx;

const initAni = () => {
  ctx = gsap.matchMedia();

  ctx.add(
    {
      isDesktop: `(min-width: 700px)`,
      isMobile: `(max-width: 699.9px)`,
    },
    (self) => {
      return () => {};
    },
    main.value
  );
};

onMounted(() => {
  initAni();
});

onUnmounted(() => {
  ctx.revert();
});

The code above is valid for GSAP Context as well.

 

Hopefully this helps.

Happy Tweening!

[Jeff840108]

Thank you! It works now! 

Originally, I thought using kill() when calling gsap.context() would be better for clearing animation effects (?), but it turns out that revert() is a better option.

 

[GreenSock]

Here's a fork: 

https://stackblitz.com/edit/nuxt-starter-nxggrm?file=pages%2Findex.vue

 

I learned today that Vue wraps the value of any ref in a Proxy which can be problematic because the original instance becomes unfindable. For example: 

const ctx = ref();

onMounted(() => {
  let mm = gsap.matchMedia();
  ctx.value = mm;
  console.log(mm === ctx.value); // <-- false !!!
});

What??!

 

I've applied a workaround in the next release of GSAP, but I just wanted to point out this rather frustrating behavior in Vue. In the meantime, I'd probably just not use a ref. Instead, a regular variable should be fine, as shown in my fork.

 

Thanks for providing an excellent minimal demo, @Jeff840108 ? 

[Page Tailoring]

Is it nuxt with SSR? I have problems when moved from nuxt 2 to 3. Now I'm moving all gsap to composables and loadding them onMounted, nothing before.

 

<template>
	<div ref="dom">....</div>
</template>
 
<script setup lang="ts">
const dom = ref(null)
const ctx = ref(null)
 
onMounted(() => {
  const { initSomeScrolltrigger } = useScrollers()
  initSomeScrolltrigger(dom.value, ctx)
})
onUnmounted(() => {
  const { cleanGsapContext } = useBasicAnimations()
  cleanGsapContext(ctx)
})
</script>

const initSomeScrolltriger = (scope, context) => {
    context.value = gsap.matchMedia()
    context.value.add(matchMediaConditions, (ctx) => {
      const { isMobile } = ctx.conditions
      const s = gsap.utils.selector(scope)

		(...)
    })
  }

const cleanGsapContext = (ctx) => ctx.value.revert()

 

[Rodrigo]

Hi @Page Tailoring,

 

Are you currently facing a specific issue regarding this or just sharing a solution for an issue you had?

 

Happy Tweening!

[Page Tailoring]

Sharing a solution that made me forget my SSR issues in nuxt3 with gsap.