Jump to content
Search Community

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

MarcOlmos test
Moderator Tag

Go to solution Solved by MarcOlmos,

Recommended Posts



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. 









Link to comment
Share on other sites

  • MarcOlmos changed the title to GSAP target not found of an element that doesn't appear when the page is loaded

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.

Link to comment
Share on other sites

  • Solution

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");
    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;
            if (currentScrollPos > 218) {
            } else {

  }, false);

Link to comment
Share on other sites

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:


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


  • Like 3
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...