Jump to content
GreenSock

sbrack8t

Issues loading GSAP and ScrollTrigger via CDN

Recommended Posts

I'm trying to load gsap and ScrollTrigger on a project using the cdn links.  Our normal JavaScript process uses  webpack with babel.  I'm getting the following errors for Scroll Trigger in the browser console `

Invalid property scrollTrigger set to {trigger: div.collage__image.collage__type-youtube, scrub: true, end: "+=65%"} Missing plugin? gsap.registerPlugin()

 

Here's the cdn links we're using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

 

And the javascript file

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';gsap.registerPlugin(ScrollTrigger);const collages = document.querySelectorAll('.collage');collages.forEach(collage => {
  const collageImages = gsap.utils.toArray('.collage__image');
  collageImages.forEach(image => {
    gsap.to(image, {
      yPercent: -25,
      scrollTrigger: {
        trigger: image,
        scrub: true,
        end: '+=65%',
      },
    });
  });
});
Link to comment
Share on other sites

You can only use one or the other. Either get rid of the script tags, or remove your imports.

 

  • Like 1
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.
×