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
