FrEZ Posted February 8, 2023 Share Posted February 8, 2023 gsap-core.js:89 Invalid property scrollTrigger set to {trigger: div.fifth-wrap, start: 'top center', end: '+=400', scrub: true, markers: true}end: "+=400"markers: truescrub: truestart: "top center"trigger: div.fifth-wrap[[Prototype]]: Object Missing plugin? gsap.registerPlugin() When I console.log ScrollTrigger I get this ScrollTrigger2(vars, animation) { _coreInitted || ScrollTrigger2.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)"); this.init(vars, animation); Could the problem come from the fact I am using multiple scrolltriggers? let fifthWrapText = gsap.utils.toArray('.fifth-wrap') fifthWrapText.forEach((section) => { let title = section.querySelector(".business-title"); let text = section.querySelector(".business-general"); gsap .timeline({ scrollTrigger: { trigger: section, start: "top center", end: "+=400", scrub: true, markers: true } }) .from(title, { opacity: 0, x: 500 }) .from(text, { xPercent: -120 }); }); Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2023 Share Posted February 8, 2023 That error means you didn't register the plugin, so GSAP has no idea what "scrollTrigger" is inside a tween. It thinks you're literally trying to animate a property of your object that's named "scrollTrigger". The solution is hinted at in the error message itself gsap.registerPlugin(ScrollTrigger); Link to comment Share on other sites More sharing options...
FrEZ Posted February 8, 2023 Author Share Posted February 8, 2023 I do register the plugin, just forgot to include it in the code Link to comment Share on other sites More sharing options...
FrEZ Posted February 8, 2023 Author Share Posted February 8, 2023 gsap.registerPlugin(Observer, ScrollTrigger, ScrollToPlugin); I do register the plugin, just forgot to include it in the code Link to comment Share on other sites More sharing options...
Cassie Posted February 8, 2023 Share Posted February 8, 2023 Hi there, are you still having issues or did this solve it for you? Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2023 Share Posted February 8, 2023 10 hours ago, FrEZ said: gsap.registerPlugin(Observer, ScrollTrigger, ScrollToPlugin); I do register the plugin, just forgot to include it in the code Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. Link to comment Share on other sites More sharing options...
FrEZ Posted February 9, 2023 Author Share Posted February 9, 2023 12 hours ago, GreenSock said: Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue? Link to comment Share on other sites More sharing options...
FrEZ Posted February 9, 2023 Author Share Posted February 9, 2023 Could I get an actually working prototype of a scrolltrigger in action, so that I can test if it's from my animation? Though I don't get the error in the codepen, the aniamtion as a whole doesn't function. My scroller isn't the body, it's a custom element Link to comment Share on other sites More sharing options...
Cassie Posted February 9, 2023 Share Posted February 9, 2023 See the Pen YzjoweW?editors=1010 by GreenSock (@GreenSock) on CodePen Sure, you needed to define the scroller to be the custom element and also scope your selectors inside the loop rather than targeting the first one every time with document.querySelector Hope this helped! 1 Link to comment Share on other sites More sharing options...
FrEZ Posted February 9, 2023 Author Share Posted February 9, 2023 On 2/8/2023 at 10:36 PM, GreenSock said: Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue? Didn't find a reason why it doesn't work but when I use ScrollTrigger.create it works. Link to comment Share on other sites More sharing options...
GreenSock Posted February 9, 2023 Share Posted February 9, 2023 24 minutes ago, FrEZ said: The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue? No, it doesn't matter how many ScrollTriggers/Observers you've got. The only thing I can think of is if you're creating multiple CONFLICTING ones. Are you using React or something? I wonder if you're not doing proper cleanup. Again, it's very difficult to diagnose blind. Your CodePen had several problems which @Cassie already addressed but your latest demo doesn't seem to incorporate any of her corrections. Make sure you're using the latest version of GSAP in your local project too. 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