ScrollTrigger seems like doesn't work with matchMedia

[juan-alvarz]

Hello dear Green Sock Team, I have a question about gsap.matchMedia and ScrollTrigger plugin,  I am making a page with ScrollTrigger animation, as I have asked before:

 

I need to make the animations according to mediaqueries, as they are quite different from each other, but it turns out that I have tried several things and it does not work.
1. 

import React, {useEffect} from 'react'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger)
import {mainAnimationDesktop, mainAnimationMobile} from '../utils/animations'

export default function Page(){
	useEffect(() => {
    	const mm = gsap.matchMedia();
        mm.add('(min-width: 1024px)', mainAnimationDesktop)
        mm.add('(max-width: 1023px)', mainAnimatoinMobile)
    },[])
    
    return (
    	// ... my components
	)
}

this work properly, except for one thing, when I resized the browser down to 1024 the page break, but if I reload the page (whit that size, <1024), the page load with animation mobile correctly, and if I resized the page doesn't break and execute the correct desktop animation, what's happen here?

2. 

import React, {useEffect} from 'react'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger)
import {mainAnimationDesktop, mainAnimationMobile} from '../utils/animations'

// in this version I just put the logic inside mm

export default function Page(){
	useEffect(() => {
    	const mm = gsap.matchMedia();
        mm.add('(min-width: 1024px)', () => {
        	// the code is so extensive, so I just omit it
        })
        
        mm.add('(max-width: 1023px)', () => {
        	// this version is like the desktop version, but I'TS JUST AN EXAMPLE 
			// both desktop and mobile have ScrollTrigger
            const tl = gsap
				.timeline()
				// config for views of scenes
				// give an visibility 0 to all container for avoid superpositions
				.set(MAIN_CONTAINERS_IDS, {
					opacity: 0,
					visibility: 'hidden',
				})
				// Init with sectionOne
				.to(ids.sectionOne.MAIN_CONTAINER, {
					visibility: 'visible',
					opacity: 1,
					duration: 2,
				})
				// Content of sectionOne
				.fromTo(
					ids.sectionOne.CONTENT,
					{
						opacity: 0,
						x: '-=15vw',
					},
					{
						opacity: 1,
						x: 0,
						duration: 5,
						delay: 0.5,
					}
				)
				// introduction of page is finished
				.addLabel('sectionOne stop - enter sectionTwo');
			ScrollTrigger.create({
				animation: tl,
				trigger: MAIN_CONTAINERS_IDS[0],
				start: 'top top',
				end: '1000',
				scrub: 0.5,
				pin: true,
				snap: {
					snapTo: 'labelsDirectional',
				},
			});
        }
    },[])
    
    return (
    	// ... my components
	)
}

in this one the animation for desktop and moble go perfectly but... we arrive to the title of the topic, the ScrollTrigger seems to stop working

links:
1. here is the second version, with logic inside mm at the same file, where ScrollTrigger doesn't work:
https://ignite-web-juan-alvarz.vercel.app/temp

 

2. here is the first version, with animation comes from another file but inside mm depending mediaqueries, in this one the desktop version is correct, but in mobile doesn't work the animation:

https://ignite-web-rouge.vercel.app

 

I know the post was a bit long but it is to clarify everything and be very specific and you can help me, thank you very much.

[Rodrigo]

Hi,

 

Is really hard for us to debug a live site, but the only thing I can see is that you're not properly cleaning up in your return function of the useEffect hook:

useEffect(() => {
  const mm = gsap.matchMedia();
  // All your GSAP stuff here.
  return () => mm.revert();
}, []);

Take a good look at the MatchMedia docs:

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

 

If you keep having issues, please do your best to create a minimal demo  that we can take a good look at in order to see what could be the issue.

 

Happy Tweening!