In my codepen I have a script tag that runs a scroll trigger pin. I've tested the pin and know it works. But when it's added via the script tag (in the HTML) the start and end marker move on scroll smoother scroll. Is this multi script approach possible? Or should I just keep all scroll trigger/scroll smoother JS in one file?
Here's the scroll trigger script for reference:
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
function imagesMove() {
let galleryImages = gsap.utils.toArray('.gallery picture')
let wrapper = document.querySelector('.gallery .wrapper')
let startWidth = wrapper.getBoundingClientRect().width - window.innerWidth
gsap.to(galleryImages, {
x: () => -startWidth,
ease: "none",
scrollTrigger: {
trigger: ".gallery",
pin: ".gallery",
scrub: 0.5,
anticipatePin: 1,
start: "top: +=15%",
end: "+=" + (window.innerHeight * galleryImages.length - 1),
markers: true,
}
});
ScrollTrigger.refresh()
}
imagesMove()