Change URL after animation starts

[momo12]

Hi Guys,

I have an array of elements ... I want to change their links after gsap.to is running. I'm using this code but nothing happens. Is there anything wrong?

 

var b = document.getElementById("dynamic-profiles").querySelectorAll("a.small-img-wr"); 
  b[i].setAttribute("href", "https://youtube.com");
 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hard to say what is going on here. I don't know if you can do getElementById and then chain querySelectorsAll to that. If that works, it will try to get you all the a.small-img-wr inside #dynamic-profiles. 

 

Then you're setting all there links to "https://youtube.com", but where is "i" coming from?  Shouldn't you be wrapping that code in a loop, where you set "i" to the index of that item ? 

 

Again, hard to say. We're missing the HTML. If you can provide a minimal demo, but keep in mind we like to keep this forum to GSAP specific questions and right now your question only has normal Javascript and there is no GSAP code to speak of.

[momo12]

7 minutes ago, mvaneijgen said:

Hard to say what is going on here. I don't know if you can do getElementById and then chain querySelectorsAll to that. If that works, it will try to get you all the a.small-img-wr inside #dynamic-profiles. 

 

Then you're setting all there links to "https://youtube.com", but where is "i" coming from?  Shouldn't you be wrapping that code in a loop, where you set "i" to the index of that item ? 

 

Again, hard to say. We're missing the HTML. If you can provide a minimal demo, but keep in mind we like to keep this forum to GSAP specific questions and right now your question only has normal Javascript and there is no GSAP code to speak of.

Thanks a lot man! I totally forgot to put them in a loop!

[mvaneijgen]

Oh, nice. Glad to help. The console would have probably stated something like "undefined variable i", when developing it is a good practice to have the console open and glance at it from time to time to see what it is saying when your code is not working. 

 

Good luck and happy tweening!

[momo12]

2 hours ago, mvaneijgen said:

Oh, nice. Glad to help. The console would have probably stated something like "undefined variable i", when developing it is a good practice to have the console open and glance at it from time to time to see what it is saying when your code is not working. 

 

Good luck and happy tweening!

Yes, I copied and pasted my code from another simple codepen I created earlier. I forgot that part  

Thanks a lot!!