nata_yar Posted July 15, 2022 Share Posted July 15, 2022 Hello, everyone! I'v been struggling with understanding why my animation worked on scroll on localhost, but after deployment all animations fire on load and not on scroll , here's the live website http://natayar.com/ What goes wrong: the picture in the header is supposed to move down on scroll the text in the about section the section titles I built a codepen for the text in About section. I console logged ScrollTrigger: ScrollTrigger ƒ ScrollTrigger(vars, animation) { _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)"); this.init(vars, animation); } Does anyone have any ideas what direction i should look at? See the Pen vYRgEBy by natalia-yarysheva (@natalia-yarysheva) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 15, 2022 Share Posted July 15, 2022 It looks like you had some funky import statements (invalid JavaScript...unless you flag your script as type="module" and have the module files in place with the correct relative paths). I see you tried to just load them from the CDN which is definitely easiest. See the Pen qBoREmN?editors=0010 by GreenSock (@GreenSock) on CodePen I don't see a problem in the CodePen - can you please explain how we can reproduce the issue you're describing? The errors on your site indicate you forgot to load (or register) ScrollTrigger. Link to comment Share on other sites More sharing options...
nata_yar Posted July 16, 2022 Author Share Posted July 16, 2022 Hi, thanks for your reply! Desired behaviour: each <p className='highlight'> changes colour on scroll - fades in and out; picture in the header moves down only on scroll. What I currently have: they change colour only once, on load and thats it. picture moves on its own , on load, without scrolling (you could see it on a deployed website- http://natayar.com/ ) I loaded gsap and scrollTrigger in my index.js via CDN like these: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> 'and I have a separate file with animation where I imported gsap and scrollTrigger like this : import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Everything works perfectly well on local host but on a deployed website still I get an error as if i didn't load neither of them gsap-core.js:87 Invalid property scrollTrigger set to {trigger: '.about-container', scrub: true, start: '-60%', end: '20%'} Missing plugin? gsap.registerPlugin() Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 16, 2022 Solution Share Posted July 16, 2022 Oh, it sounds like you just need to loop through each of your elements and create a ScrollTriggered animation for it: See the Pen qBoREmN?editors=0010 by GreenSock (@GreenSock) on CodePen As for your deployment, that's not really something we can effectively troubleshoot. I have no idea what your build process is or anything like that. Glancing at your lives site, it looks like you accidentally put the <script> tags that load GSAP/ScrollTrigger at the very END so they're not even available when you try to run your code. <!-- BAD --> <html lang="en"> <head> <script defer="defer" src="/static/js/main.64b5fbe9.js"></script> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> </body> </html> You should definitely move those up so they're available when your script runs: <!-- BETTER --> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> <script defer="defer" src="/static/js/main.64b5fbe9.js"></script> </head> <body> <div id="root"></div> </body> </html> But honestly it sounds like you've got some kind of bundler that is compiling your code and injecting the imports tools into your payload but it's excluding ScrollTrigger for some reason. If it's including GSAP inside your compiled file, it's wasteful to ALSO load it from the CDN (though that won't break anything...it's just extra kb). I can't troubleshoot your build tool, sorry. But that does sound like an issue here. You can band-aid it by loading ScrollTrigger from the CDN as I indicated above. Good luck! Link to comment Share on other sites More sharing options...
nata_yar Posted July 18, 2022 Author Share Posted July 18, 2022 thank you so much for your help!! I removed the CDNs and it now loads properly😅 2 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