new utils.selector function

[seven 7 Likes (Newbie)]

Hi,

 

I wanted to ask for some detail on how is this new selector actually selecting, because console logging something like console.log(q('.x')) ends up with TypeError: Cannot read property 'createElement' of undefined  and I do not know if this is selecting only the outer element or elements nested anywhere inside as well, I wanted to create an animation where one pies of text comes first, than I would like to mimic SplitText plugin by staggering in the opacity of elements so that the rest of the words would show up one after the other and than I would like to change this text with the text plugin to something else. I created a sandbox https://codesandbox.io/s/little-tdd-8jo9s?file=/src/App.js here I would expect that if i select .stagger class which is applied to many elements it will act as querySelectorAll, and by appending '>' at the end each piece would show up after the other, but in my dev env it omits the part with stagger class it and goes straight to textPlugin part, and on sandbox the textPlugin part is not being triggered. Should I provide just the class to be animated or the full path eg: '.right .stagger'?

 

Thanks!

[Cassie 5,403 Likes (Superhero)]

Hey there Seven

You need to register the text plugin in your sandbox - 'Missing plugin? gsap.registerPlugin() ' in order for that animation to work.

And if you're getting an undefined error when logging out the element I imagine the DOM hasn't loaded at the time you're querying it.

It's similar to calling .querySelectorAll() on that element – rather than on the document – It returns an Array, so you're able to stagger and filter and map over it til your heart's content.

 

Here - this is what you should be getting. (check the console)

See the Pen eYWBgNY?editors=1011 by GreenSock (@GreenSock) on CodePen

[seven 7 Likes (Newbie)]

Hi Cassie!

 

Thank you very much!

[Cassie 5,403 Likes (Superhero)]

My pleasure pal! ☺️