Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pati

document.querySelectorAll() not working

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

OSUblake,

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

post-51501-0-95551500-1489596984.jpg

post-51501-0-67133600-1489597233_thumb.jpg

Link to comment
Share on other sites

I'll make that demo for you later. Quick questions...

 

How big are those waves supposed to be?

Do the 2 waves stacked on top of each other move at the same speed?

Are the waves stationary, or do they move across the landscape?

  • Like 1
Link to comment
Share on other sites

The size of the waves should be as this example: 

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

Yes, the waves move at the same speed and they are stationary.

Thank you very much for your help!!

Link to comment
Share on other sites

I know this is not the exact animation you are after but, have a look at this pen I made a while ago. More specifically, look how I am using a pattern, it might be handy for you in the long run.

 

See the Pen adjGNp by dipscom (@dipscom) on CodePen

 

Maybe combine Blake's stuff with this.

  • Like 3
Link to comment
Share on other sites

I do love that demo Pedro.

 

How much longer will it be for version 2.0 with the sharks?

:) 

  • Like 1
Link to comment
Share on other sites

Once I stop working three jobs...

  • Like 1
Link to comment
Share on other sites

How much longer will it be for version 2.0 with the sharks?

 

I have one simple request, and that is to have sharks with frickin' laser beams attached to their heads.

 

.

  • Like 2
Link to comment
Share on other sites

Sorry about the delay.

 

Since the waves are going to be pretty much the same, you can animate a single, master wave inside a <defs> element. From there, you can create clones of that wave with a <use> element. Is this what you were going for?

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

 

.

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