Jump to content
GreenSock

dkolb5

Multiple JS File Scroll Trigger

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×