GSAP target not found of an element that doesn't appear when the page is loaded

[MarcOlmos 1 Likes (Newbie)]

Hi,

 

I've been having problems with an element that appears when a button is clicked.

 

 

When I scroll more than X px my navbar height changes, and I would like to do the same with the element to animate. But GSAP doesn't find the target.

 

 

 

How can I make GSAP wait to search for the animation until I click the button of "Adding to the cart"??

 

Thats my code. 

 

 

Thanks!!!

 

 

 

 

[GreenSock 18,251 Likes (Superhero)]

It's super difficult to troubleshoot just by looking at screenshots. If you're getting that warning, it means that you're trying to animate an element with a selector that doesn't exist at that point. Are you creating that element dynamically or something? Just make sure you only animate it after it exists

 

If you still need some help, you'll need to create a minimal demo that shows the issue. It shouldn't be your actual site code - just something simplified that reproduces the issue with as little code as possible. We'd be happy to take a peek and answer any GSAP-specific questions. 

 

I'd also recommend updating to the more modern GSAP 3 syntax.

And for scroll-triggered animations, ScrollTrigger may help you a lot.

[MarcOlmos 1 Likes (Newbie)]

I've found the solution, thank you!!!  

 

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  console.log("DOM loaded");
  
  // wait until images, links, fonts, stylesheets, and js is loaded
  window.addEventListener("load", function(e) {
    
    // custom GSAP code goes here
     console.log("window loaded");
    
    gsap.registerPlugin(ScrollTrigger);
      
      
    document.getElementById("button").addEventListener("click", function(){ 
        const notifyTL = new TimelineLite({paused: true})
    
        notifyTL.to(".notifyjs-corner", {y: +70})

        var prevScrollpos = window.pageYOffset;

        window.onscroll = function() {
          var currentScrollPos = window.pageYOffset;
          console.log(currentScrollPos);
            if (currentScrollPos > 218) {
                notifyTL.reverse();        
            } else {
                notifyTL.play();
            }
        }
    });
    

    
  }, false);
  
});

[_Greg _ 127 Likes (Specialist)]

Don't use `window.addEventListener("load"...)` inside `document.addEventListener("DOMContentLoaded"..)`!!!

Sometimes in Safari window load works earlier then `DOMContentLoaded` so your code will get error

32 minutes ago, MarcOlmos said:

 gsap.registerPlugin(ScrollTrigger);

why do you call ScrollTrigger but never use?

 

32 minutes ago, MarcOlmos said:

const notifyTL = new TimelineLite({paused: true})

Jack give you instruction how to migrate to gsap 3

It should be 

const notifyTL = gsap.timeline({paused: true})