xlixelit Posted July 16, 2021 Share Posted July 16, 2021 Good afternoon, When I am in development mode everything works fine. But in build/production I get this: Invalid property scrollTrigger set to Objectend: "bottom bottom"scrub: 2start: "-50px top"trigger: ".scrollDist"__proto__: Object Missing plugin? gsap.registerPlugin() This is my code I have written: gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'-70px top', end:'bottom bottom', scrub:2}}) Not too sure why it runs fine in dev but not in build? Many thanks Joel Link to comment Share on other sites More sharing options...
xlixelit Posted July 16, 2021 Author Share Posted July 16, 2021 This is my import etc, using VUE if that matters to anyone. import gsap from "gsap"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin( ScrollTrigger, ScrollToPlugin ); Link to comment Share on other sites More sharing options...
GreenSock Posted July 16, 2021 Share Posted July 16, 2021 Welcome to the forums, @xlixelit! It definitely sounds like an issue with your build system because that error means that ScrollTrigger is not loaded or registered. But clearly your code that you shared is importing ScrollTrigger and registering it. It's quite difficult to troubleshoot blind, but maybe your build tool is being way too aggressive with tree shaking and it's dumping ScrollTrigger when obviously it's shouldn't be(?) That's actually one of the purposes of gsap.registerPlugin() - it forces you to reference the plugins in your own code so that it WON'T get dumped by tree shaking. So I have no idea why your environment is doing that. Link to comment Share on other sites More sharing options...
xlixelit Posted July 17, 2021 Author Share Posted July 17, 2021 Thanks for that reply. I will look into it further from my end. Cheers Link to comment Share on other sites More sharing options...
OSUblake Posted July 17, 2021 Share Posted July 17, 2021 Are you using nuxt? If so, I would try to transpile gsap. Or try using the umd files. Some frameworks aren't configured to consume es modules. import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; 1 Link to comment Share on other sites More sharing options...
xlixelit Posted July 18, 2021 Author Share Posted July 18, 2021 I will try that, but using Vue.js Will post either way. Cheers Link to comment Share on other sites More sharing options...
xlixelit Posted July 18, 2021 Author Share Posted July 18, 2021 hmmmm While it comes up as the animation has already run. When I refresh the page, the photos come up and then the animation runs right away. But it still works perfectly fine in development. Link to comment Share on other sites More sharing options...
OSUblake Posted July 19, 2021 Share Posted July 19, 2021 Make sure you're using the latest version, 3.7.1. Outside of that, there's not much we can do without seeing the problem first hand, like in a minimal repo that just shows the issue. 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