ScrollTrigger Glitch, still not resolved..

[Vasil]

Hello, amazing people! Again, I couldn't create a codepen copy of the problem because it might be related to the rest of the webpage. So I would share the link here if needed, I can share some login details in the project testing environment. 

 

The problem is in the second ScrollTrigger, where Homer is located. The strange thing is that in more modern devices or different browsers, there is no glitch, for example in Safari or iOS there is no glitch, but in Brave or an Android device there is.

Here is the code:

 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.matchMedia({
  // Desktop
  "(min-width: 1120px)": function () {
    const tlDesktop = gsap.timeline();

    tlDesktop.fromTo(
      ".monitor-wrapper",
      { scale: 4, force3D: false, transformStyle: "flat" },
      {
        scrollTrigger: {
          trigger: ".desktop",
          start: "top top",
          end: "bottom -200%",
          scrub: true,
          pin: true,
        },
        scale: 1,
      }
    );
  },
});

ScrollTrigger.matchMedia({
  // Mobile
  "(max-width: 1119px)": function () {
    const tlMobile = gsap.timeline();

    tlMobile.fromTo(
      ".mobile-screen",
      { scale: 3.6, force3D: false, transformStyle: "flat" },
      {
        scrollTrigger: {
          trigger: ".mobile-container",
          start: "top top",
          end: "bottom -200%",
          scrub: true,
          pin: true,
        },
        scale: 1,
      }
    );
  },
});

ScrollTrigger.matchMedia({
  // Desktop
  "(min-width: 1120px)": function () {
    const tlDesktopHomer = gsap.timeline();

    tlDesktopHomer.fromTo(
      ".homer-brain",
      { scale: 36, force3D: false, transformStyle: "flat" },
      {
        scrollTrigger: {
          trigger: ".homer-container",
          start: "top top",
          end: "bottom -200%",
          scrub: true,
          pin: true,
        },
        scale: 1,
      }
    );
  },
});

ScrollTrigger.matchMedia({
  // Mobile
  "(max-width: 1119px)": function () {
    const tlMobileHomer = gsap.timeline();

    tlMobileHomer.fromTo(
      ".homer-brain",
      { scale: 80, force3D: false, transformStyle: "flat" },
      {
        scrollTrigger: {
          trigger: ".homer-container",
          start: "top top",
          end: "bottom -200%",
          scrub: true,
          pin: true,
        },
        scale: 3.5,
      }
    );
  },
});

ScrollTrigger.batch(".stickman", {
  toggleClass: "active",
  once: true,
});

Here is the link:
https://staging.gurbov.design/

Thank you!

[Rodrigo]

Hi,

 

There is not a lot we can do on a live site  (DOH!, sorry as a Simpsons fan couldn't resist 😄), If the problem can't be replicated in codepen, then surely something else is causing the issue. I'd recommend you to start removing stuff or isolate just that section in your local environment and start adding packages and styles until this breaks in order to isolate the culprit of the problem.

 

There are two things I could advice you, first use GSAP MatchMedia since ScrollTrigger.matchMedia was deprecated in V3.11:

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

 

If you can create a minimal demo in codepen, be sure to share the debug link as well, not the one with all the iframes, which makes it easier to test on deivces.

 

Sorry I can't be of more assistance but with just a code snippet and a live site there isn't a lot we can do.

 

Happy Tweening!