Stop scrollTrigger and animations when window is too small (after resize)

[dr.Pxl]

Hey,

 

I am so confused and nearly at the end of my nervs after hours of trying.

 

I am not able to disable the scrollTrigger of my master TL or kill the masterTL and underlying tweens. I basically want to stop GSAP animations if the window is to small.

Maybe you guys can take a look at my code and espacially at the comments I made.

Thank you so much!
 

    var seoIntroMasterTl = gsap.timeline({

        scrollTrigger: {

            trigger: sectionHeroSeo,

            start: "top top",

            end: "bottom bottom",

            scrub: 0.2,

            pin: false,

        }

    });

    if (play === false) {

        console.log(seoIntroMasterTl.scrollTrigger) //this fires at proper moment

        seoIntroMasterTl.scrollTrigger.disable(); //this doesn't work

    }

    seoIntroMasterTl.scrollTrigger.disable(); //this works

seoIntroMasterTl.add(createFadeOutUpTl(seoATFHeroContent, seoATFHeadlineGroup))

.addLabel("Macbook fly in")

.add(createScaleDownFullScreenDeviceTl(seoATFHardware, seoAtfMacbookMatrixStart, seoAtfMacbookMatrixEnd), "Macbook fly in")

.add(createFlyingScreenWindowsTl(seoAtfWindows), "Macbook fly in")

.add(createDeviceHideIntroTl(seoATFHardware, seoBenefitsIntro, yShowSeoBenefitIntroDevicePosition, yHideSeoBenefitIntroDevicePosition, yHideSeoBenefitIntroIntroPosition))

.add(seoShowBenefitsTl);

 

return seoIntroMasterTl;

[OSUblake]

Your code has little meaning without a demo.

 

If you only want animations to work at a certain screen size, you can create them inside .matchMedia().

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()