sbrack8t Posted June 11, 2021 Share Posted June 11, 2021 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 More sharing options...
OSUblake Posted June 11, 2021 Share Posted June 11, 2021 You can only use one or the other. Either get rid of the script tags, or remove your imports. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now