How use ScrollTrigger.matchMedia() in my case?

[Nickicool]

I have blocks on the page that are loaded dynamically (ajax). All blocks have a parameter that specifies the name of the function with GSAP animation.

<section class="lazyload" id="examples" data-gsap-function="blockExamples"></section>
<section class="lazyload" id="faq" data-gsap-function="blockFaq"></section>

// this functions run by events (like click or after load content with ajax)
var gsapFunctions = {
  blockExamples: function () {
    gsap.from("#examples img", {
      // ...
    });
  },

  blockFaq: function () {
    gsap.utils.toArray("#faq .item").forEach((item) => {
      var timeline = gsap.timeline({});
      timeline
      //...
    });
  }
};

After loading the block content, I run the function that contains the code for animating this block. In the Codepen example, I emulated loading Ajax content by clicking on a button.

Everything works well. But now I need to make alternative functions for some blocks with animations for the mobile/desktop version. I don't understand how this can be done in my case. I mean, I would like to keep the ability to record animations for different blocks in separate functions. Perhaps this is the wrong approach - please show me how to do it correctly.

See the Pen xxOZwjK by nickicool (@nickicool) on CodePen

[ZachSaucier]

Hey Nickicool. Your approach is fine. You just need to check the screen size and create the relevant animations. Simple  

 

If you need to also handle resize (i.e. the user resizes past the breakpoint later) you could also use an event listener for your breakpoint: MediaQueryList.addListener().

[Nickicool]

You mean that I should write my own custom handling of animation selection and resize control, instead of using the construction (?):

 

    ScrollTrigger.matchMedia({
        // desktop
        "(min-width: 800px)": function() {},
        // mobile
        "(max-width: 799px)": function() {},
        // all
        "all": function() {
        }
    });

 

[Nickicool]

I am not a very experienced programmer, please help me with the right direction of thoughts. Do I understand correctly or not that the animation selection should be implemented inside each function (and not outside of them):

    var gsapFunctions = {
        blockExamples: function () {
        //...
        },

        blockFaq: function () {
          //...
        }
    }

If I understand correctly, when resizing, I should kill the previous animation (anim.kill(); or aim.progress(0).kill()). To do this, I need access to the animation/timeline object... Am I right? In my code, functions don't return animation objects, and I don't have access to them.

[ZachSaucier]

As with most things there are multiple ways of doing this. Since all of your animations use ScrollTriggers then you can use ScrollTrigger's matchMedia method just fine inside of your functions. Or you could handle it yourself using JavaScript's matchMedia. 

 

You also need to make sure that you're not adding multiple ScrollTriggers to the same elements. You could do that by either restricting the creation of new ScrollTriggers to just the new elements or you could kill off the old ScrollTriggers and then create new ones for all the related elements.

 

Here's how I might set it up, restricting the creation of new ScrollTriggers to just the new elements:

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

 

Also please use the "fork" button when making new versions of your demo on CodePen. That way the thread makes sense for future readers.

[Nickicool]

You my hero dear friend @ZachSaucier!!!  For some reason, I thought that the construction can not be used in every function, but only once, globally, initially writing all possible animation options in it. Without the ability to add animations gradually as the code runs.