Jump to content
Search Community

document.querySelectorAll() not working

pati test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. 


So, this is what I want to achieve: 


But there's a lot of code that I wouldn't need if I use document.querySelectorAll().


This is where I get stuck:

See the Pen xqXGXm by sonder15478 (@sonder15478) on CodePen


I also tried with getElementsByClassName(), but it didn't work either...

Any ideas? 
Thank you!

See the Pen PpJqKN by sonder15478 (@sonder15478) on CodePen

Link to comment
Share on other sites

  • Solution

It works, but I think you might be confusing its usage with jQuery. document.querySelectorAll() returns a nodelist, which is kind of like an array of elements. So to create a click event and animation for each element, you need to loop through that nodelist, creating a unique click event and animation for each element.


If you're new to JavaScript, I would recommend calling a function from the loop to prevent any scope issues. Also, it's generally not a good idea to assign a function to an event. Use addEventListener instead.

// Bad
element.onclick = function() {

// Good
element.addEventListener("click", function() {

See if this helps you out...

See the Pen QpqjdB?editors=0010 by osublake (@osublake) on CodePen


And there's no shame in using jQuery. It's battle tested, works, and could simplify a lot of this.


  • Like 6
Link to comment
Share on other sites

That's great!! Thank you very much!

I was also trying to apply the code that you just gave me to another animation that I have. It's the same idea, but it isn't working either...

This is how it works at the moment: 

See the Pen NparbM by sonder15478 (@sonder15478) on CodePen


And this is applying your code: 

See the Pen dvVXpM by sonder15478 (@sonder15478) on CodePen

but it doesn't work...


Also, this might sound stupid, but in the first example, the waves are not on the top of the svg, they have like a margin top and I don't know how to disable that. Do you know to "remove" that margin?

Thank you!

Link to comment
Share on other sites

It's not a stupid question. The code to create those waves may look short and simple, but what's going on is really advanced, so any confusion is understandable. The margin is because I set the original demo up to be centered vertically.


Since I understand the code, maybe it would be better if you could give me a detailed description of what you're trying to do. Or even better, an example you can point me to or a graphic of what you're trying to achieve. It won't take me but 2 seconds to create a fork for you, and then you can ask any questions about anything that you might not understand.



  • Like 2
Link to comment
Share on other sites


I'm using an image of a city and I am animating some elements of that image like sea, clouds, etc. So, what I would like to do is to add that animated waves to the sea to give it the sensation that it's moving. 


For it, I was trying to apply the code that you gave me, but I'm afraid it's very advance to me.


What I would like to do is to have two animated waves (like the first image attached), but like 5 times over the sea (second image attached).



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...