ScrollTrigger PinSpacing issue with Locomotive Scroll

[ockhee]

Hello,

 

I am having an issue with using ScrollTrigger along with Locomotive Scroll. 

 

Essentially I am pinning a section and having it reveal an image as you scroll via a div overtop. This all works great when locomotive scroll is disabled. However as soon as it is enabled again the pinSpacing applies the padding below the section instead of overtop for the pinned scroll. Causing the pin to not happen and all the extra padding to be scrollable through below the section.

 

Would love some insight into this from anyone who has worked with these both before.

 

Thanks for your time!

 

gsap.registerPlugin(ScrollTrigger)

const FeaturedPost = () => {
  let tl = gsap.timeline()
  let featuredPostSection = useRef(null)
  let image = useRef(null)

  useEffect(() => {
    tl.to(image, {
      scrollTrigger: {
        trigger: featuredPostSection,
        pin: true,
        scrub: true,
        start: "center center",
        end: "bottom top",
        scroller: "#___gatsby",
      },
      scaleY: 0,
    })

    ScrollTrigger.addEventListener("refresh", () => window.scroll.update())
    ScrollTrigger.refresh()
  }, [tl, featuredPostSection, image])

import { useEffect } from "react"
import LocomotiveScroll from "locomotive-scroll"
import ScrollTrigger from "gsap/ScrollTrigger"
import { gsap } from "gsap"

gsap.registerPlugin(ScrollTrigger)

const scroll = {
  container: "#___gatsby",
  options: {
    smooth: true,
    smoothMobile: false,
    getDirection: true,
    touchMultiplier: 2.5,
    lerp: 0.08,
    class: "is-reveal",
  },
}

const Scroll = callbacks => {
  useEffect(() => {
    let locomotiveScroll

    locomotiveScroll = new LocomotiveScroll({
      el: document.querySelector(scroll.container),
      ...scroll.options,
    })

    // Exposing to the global scope for ease of use.
    locomotiveScroll.update()
    window.scroll = locomotiveScroll

    locomotiveScroll.on("scroll", ScrollTrigger.update)
    locomotiveScroll.on("scroll", func => {
      // Update `data-direction` with scroll direction.
      document.documentElement.setAttribute("data-direction", func.direction)
    })

    ScrollTrigger.scrollerProxy("#___gatsby", {
      scrollTop(value) {
        return arguments.length
          ? locomotiveScroll.scrollTo(value, 0, 0)
          : locomotiveScroll.scroll.instance.scroll.y
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight,
        }
      },
      pinType: document.querySelector("#___gatsby").style.transform
        ? "transform"
        : "fixed",
    })

    return () => {
      if (locomotiveScroll) locomotiveScroll.destroy()
    }
  }, [callbacks])

  return null
}

export default Scroll

 

[OSUblake]

Welcome to the forums @ockhee

 

Please keep in mind that locomotive scroll is a third party library, so we can fully support it on this forum. We can take a quick look at it and see if it's related to ScrollTrigger, but we need a minimal demo first. You can use Codesandbox for React, but please don't use Gatsby as it has trouble working. Thanks.

 

Also, keep in mind that smooth scrolling libraries need to be created first before any of your ScrollTriggers, so that could be messing stuff up. And locomotive scroll + ScrollTrigger may not work with certain data-attributes, like data-scroll-section.