Has anyone lost their pin-spacer between local and staging/prod?

[DevC]

In lieu of full demo, throwing this out there if it's been seen before. Happy to make a demo if this is not enough context.

Have you seen this and what was the issue? gsap and scrolltrigger are both loaded and running, but no pin-spacer.

[elegantseagulls]

7 minutes ago, DevC said:

Have you seen this and what was the issue? gsap and scrolltrigger are both loaded and running, but no pin-spacer.

Have not seen this issue before. A demo would be helpful.

[GreenSock]

Hey @DevC. Nope, I don't recall ever hearing of something like that. I wonder if you loaded the wrong ScrollTrigger file or something (not GreenSock's)? 🤷‍♂️

 

Please provide a minimal demo and we'd be happy to take a peek. 

[DevC]

Ah it looks like I've done something wrong with my media query, but I can't quite see it. I can get pin-spacer to appear if I load the page in mobile view first then switch to desktop view. Very odd behavior. As you can see below I want to kill any pinning below 655px.

 

  useEffect(() => {
    // Scroll Scenes
    ScrollTrigger.matchMedia({
      '(min-width: 655px)': function () {
        const scenes = gsap.utils.toArray('#mediaObject')

        // maybe use dymanic height for pin/scroll ends?
        const height = (scenes.length - 1) * 200 + '%'
        // Scenes Timeline
        const pinTl = gsap.timeline({
          scrollTrigger: {
            trigger: wrapRef.current,
            pin: listRef.current,
            start: 'center center',
            end: `+=${height}`,
            scrub: 1,
            anticipatePin: true,
          },
        })
      },
    })
  }, [])

 

[GreenSock]

Yep, that looks like it's only going to happen on viewports 655px wide and above. But you're saying that you see the opposite? You see the ScrollTriggered timeline running only on screens BELOW that size? Something sounds wrong here, but we cannot effectively troubleshoot without a minimal demo. 🤷‍♂️

 

You must have other code elsewhere that is affecting things. 

[DevC]

I'll tease out a demo, but here's a short vid that shows what I mean is happening.