Pete G Posted February 16, 2021 Share Posted February 16, 2021 Hi there, Still finding my way with GSAP and very slowly watching a ton of videos and trying new things out. Using Oxygen on a dev site, we have two effects where the background color changes as you scroll, this in two sections. Essentially two separate effects in one code block, as below. The issue, it works fine however I do see an error and can't for the life of me work out why. Any advice would be gratefully received regarding the error or the code I am using. Many thanks. ReferenceError: gsap is not defined on line #2 jQuery(document).ready( function() { gsap.registerPlugin(ScrollTrigger); gsap.to("#section-2-107", { scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "black" } }); gsap.to("#section-1813-107", { scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "black" } }); }) Link to comment Share on other sites More sharing options...
tailbreezy Posted February 16, 2021 Share Posted February 16, 2021 Quote ReferenceError: gsap is not defined on line #2 Are you importing gsap as well as ScrollTrigger. It looks like you are referencing gsap.ScrollTrigger and you don't have gsap available. Quote start: "10% 100%", end: "45% 60%", Note that your code might not work as you expect (depending on whether your trigger is within the viewport on start — as @ZachSaucier pointed in the post below ), though I guess passing the referenceError should be handled first in order to see it. Here is what it does. // start 10% — position the start-trigger 10% from the top of the trigger 100% — position the scroll-start at the bottom of the viewport // end 45% — position the end-trigger 45% from the top of the trigger 60% — position the scroller-end 60% from the top of the viewport 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 3 hours ago, tailbreezy said: Thus your 10%(or any value) will ALWAYS be before your scroller-start, thus you find yourself in a started state already. That's not true if the trigger starts below the viewport. 3 hours ago, tailbreezy said: Note that your code wouldn't work as you expect Again, there is a condition where this is not an issue (if the element is tall enough and outside of the viewport). So you can't that it's definitely an issue based on the given code alone. 3 hours ago, Pete G said: ReferenceError: gsap is not defined on line #2 That means that either GSAP is not loading or it's loading after this script. Without seeing the full code, we can't say which of those that it is. It always helps to create a minimal demo of whatever issue that you're facing to help you debug what's going wrong. It also gives you a way of sharing any problematic code with us so that we can help where things are actually going wrong 4 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 16, 2021 Share Posted February 16, 2021 A-ha. Definitely missed that case. Link to comment Share on other sites More sharing options...
Pete G Posted February 16, 2021 Author Share Posted February 16, 2021 Hi @ZachSaucier Thank you for your thoughts. The code given below is all we have after following various tutorials. It's all working on the page and we are happy with it however the error a concern. It only shows in the builder and not on the page. To create a demo of what we have created in Oxygen would take me hours, I am very out of practice creating something with HTML & CSS, I guess this the result of using builders for years. If the code is of no use, I guess we either live with the error or bin the idea which would be a shame. Thanks again <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> jQuery(document).ready( function() { gsap.registerPlugin(ScrollTrigger); gsap.to("#section-2-107", { scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "black" } }); gsap.to("#section-1813-107", { scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "black" } }); }) Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 56 minutes ago, Pete G said: The code given below is all we have after following various tutorials. It's all working on the page and we are happy with it however the error a concern. It only shows in the builder and not on the page. Sounds like an issue with Oxygen's builder then. I would reach out to their support about the issue. 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