Jump to content
Search Community

New to GSAP and have an error

Pete G test
Moderator Tag

Recommended Posts

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

 

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

 

 

  • Like 1
Link to comment
Share on other sites

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 :) 

  • Like 4
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...