Multiple JS File Scroll Trigger

[dkolb5]

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()

 

See the Pen poamPbp by bws_dan (@bws_dan) on CodePen

[GreenSock]

It looks like whatever is causing the problem is inside your 3rd party script at https://beemok.bwsdemo.com/app/themes/buzzworthy_fw/assets/js/images_move.min.js which we can't effectively troubleshoot because it's not GreenSock code and we have no idea what it's doing. You can definitely have scripts in multiple files (as far as GreenSock stuff is concerned). 

[dkolb5]

The Javascript in my original posting is what's in the file. Just minified by webpack. I understand you only focus on GSAP related items. So shouldn't the ScrollTrigger.refresh() re-calculate the scroll triggers pin? So the pin would behave normally? 

 

For reference this is the same script just all in one codepen (and not from a separate script): 

See the Pen KKQLXmQ by bws_dan (@bws_dan) on CodePen

[GreenSock]

So you're loading multiple versions of GSAP, ScrollTrigger, and ScrollSmoother and also duplicate code and running it, creating duplicate ScrollSmoothers/ScrollTriggers? I certainly wouldn't recommend doing that  Is there any particular reason you're trying to do it that way? 

[dkolb5]

I had a theory to append a second script to the each new ajax loaded page. But have realized that's a bad idea. I'll just make it work off the one JS file. Thanks for listening.