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%',
},
});
});
});