colon character ":" in id throwing error

[chacrasoftware]

I have a component with dynamic id usinguseId()hook from react. it generates a string that contains a colon ":R1fakq:" something similar to this. then I will use this id to trigger a scrollTo with ScrollToPlugin but it throws an uncaught error. I tried manually setting the id with a colon character and it render the same issue. 

[Rodrigo]

Hi,

 

This is not a GSAP related issue, if you inspect the console you'll see that the error stems from the way the selector is being passed to the querySelectorAll() method GSAP uses under the hood.

 

Here you can find a couple of ways to get around this:

https://stackoverflow.com/questions/73894096/react-useid-creates-invalid-selector

 

Finally if I was you I'd drop that particular hook and find another way to add dynamic ids to my elements.

 

Hopefully this helps

Happy Tweening!

[chacrasoftware]

Hi @Rodrigo, Thank you! CSS.escape() did the trick! 😍