ScrollTrigger using pin with ScrollTo to handle snap behaviour - Pinning issue

[Evans Hunt 0 Likes (Newbie)]

Hello,

 

I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent.

 

The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread.

 

Thanks

 

 

 

See the Pen rNpyexw by hichamtahaeh (@hichamtahaeh) on CodePen

[OSUblake 18,472 Likes (Superhero)]

Welcome to the forums @Evans Hunt

 

I'm wondering if this code might be better for something like that.

 

// this scrolling object just allows us to conveniently call scrolling.enable(), scrolling.disable(), and check if scrolling.enabled is true.
  // some browsers (like iOS Safari) handle scrolling on a separate thread and can cause things to get out of sync (jitter/jumpy), so when we're animating the scroll position, force an update of GSAP tweens when there's a scroll event in order to maintain synchronization)
  const scrolling = {
    enabled: true,
    events: "scroll,wheel,touchmove,pointermove".split(","),
    prevent: e => e.preventDefault(),
    disable() {
      if (scrolling.enabled) {
        scrolling.enabled = false
        window.addEventListener("scroll", gsap.ticker.tick, { passive: true })
        scrolling.events.forEach((e, i) =>
          (i ? document : window).addEventListener(e, scrolling.prevent, {
            passive: false,
          })
        )
      }
    },
    enable() {
      if (!scrolling.enabled) {
        scrolling.enabled = true
        window.removeEventListener("scroll", gsap.ticker.tick)
        scrolling.events.forEach((e, i) =>
          (i ? document : window).removeEventListener(e, scrolling.prevent)
        )
      }
    },
  }

  function goToSection(section, anim, i) {
    console.log(scrolling.enabled)

    if (scrolling.enabled) {
      // skip if a scroll tween is in progress
      scrolling.disable()

      gsap.to(window, {
        scrollTo: { y: section, autoKill: false },
        onComplete: scrolling.enable,
        duration: 1,
      })

      anim && anim.restart()
    }

    console.log(section)
  }

  sections.forEach((section, i) => {
    
    ScrollTrigger.create({
      trigger: section,
      start: "top bottom-=1",
      end: "bottom top+=1",
      onEnter: () => goToSection(section, intoAnim),
      onEnterBack: () => goToSection(section),
    })
  })

 

 

[Evans Hunt 0 Likes (Newbie)]

Hello @OSUblake, sorry for the late reply!

The above code definitely helped out my widget a lot, but i'm just wondering what the intoAnim object is referencing on the onEnter callback?

 

Thanks.

[OSUblake 18,472 Likes (Superhero)]

Oh, it was something I accidentally copied and pasted from another demo. You can pass in an animation instance to that gotoSection function and it will restart it.