GSAP ScrollTrigger Issue with MatchMedia and Pinned Elements

[Filip1139]

Hello everyone,

 

I'm currently encountering an issue in my project where I use GSAP to animate two sections. One of these sections is pinned, and the other one is observed by ScrollTrigger to initiate the animation.

 

In the structure of my JS code (shared on CodePen), you'll notice that the pinned element utilizes matchMedia. The second element, meanwhile, is a new instance of ScrollTrigger. The code has been simplified to its bare minimum for clarity's sake. I've retained only the structure of the code as in the project and removed the actual animations.

 

The problem I'm facing is that when we reduce the window size, the triggers of the second animation appear to be moving to different places as if they're calculating the pinned element's space incorrectly. The issue is even more pronounced in my private project, where duplicate triggers appear after resizing, also in various places.

 

Do you have any advice or potential solutions? I would appreciate any assistance.

I'm also attaching a video link in case you don't encounter this issue: https://www.loom.com/share/211ed4038853479b87c287ff6b6d06d3

 

Best regards.

See the Pen WNaPoKQ by Filip1139 (@Filip1139) on CodePen

[Rodrigo]

Hi,

 

Actually I'm not seeing any odd behaviour in your codepen and unfortunately the loom link is just a very short gif that doesn't clarify things a lot 🤷‍♂️

 

For what I can see in your codepen example though, this might be an issue with order of operation, here is what happens. On the first load you create the ScrollTrigger instance in the MatchMedia callback and then the one outside. Then you pass one of the breakpoints, what happens now? MatchMedia reverts everything inside it, so that particular ScrollTrigger instance is gone "Adiós!", but the one outside remains. Then you create the one in the MatchMedia callback again, but this one is created after the other, when it should happen before. See the problem?

 

To fix this just give each ScrollTrigger instance a refreshPriority value, so the one outside the MatchMedia instance is always higher than the one outside so it's refreshed before:

const mm = gsap.matchMedia(),
  tablet = 768,
  desktopSm = 1024;

mm.add(
  {
    isDesktop: `(min-width: ${desktopSm}px)`,
    isTablet: `(min-width: ${tablet}px)`,
    isTabletMax: `(max-width: ${tablet - 1}px)`
  },
  (context) => {
    let { isMobileMax } = context.conditions;

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: selector.pinSection,
        start: () => "center center",
        end: "+=800",
        pin: !isMobileMax,
        scrub: !isMobileMax,
        refreshPriority: 1,
        markers: { indent: 300 }
      }
    });
  }
);

ScrollTrigger.create({
  trigger: selector.animSection,
  start: () => `top center`,
  end: () => "bottom 5%",
  markers: true,
  refreshPriority: 0,
  onToggle: ({ isActive }) => {},
  onLeave: () => {},
  onEnterBack: () => {}
});

From the ScrollTrigger Docs:

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

Hopefully this helps.

Happy Tweening!