Selecting nth child

[midnightgamer 2 Likes (Newbie)]

I am trying animate child of element dynamically on button click.

Here is the code for selecting the nth-child

 

I am passing ${c} as parameter to function.

var child = CSSRulePlugin.getRule(`.main-overlay .child:nth-child(${c})`)
console.log(child)
TweenLite.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4})

But child is undefined, What is wrong with my code? 

[Ihatetomatoes 324 Likes (Leader)]

Hi @midnightgamer, why don't you simply use the document.querySelector?

 

const c = 3;
const child = document.querySelector(`.box:nth-child(${c})`);
gsap.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4});

Here is CodePen demo:

See the Pen bGpqxrx by ihatetomatoes (@ihatetomatoes) on CodePen

 

You should also use the new GSAP3 syntax gsap.to

 

Hope that helps.

[midnightgamer 2 Likes (Newbie)]

1 minute ago, Ihatetomatoes said:

Hi @midnightgamer, why don't you simply use the document.querySelector?

 

const c = 3;
const child = document.querySelector(`.box:nth-child(${c})`);
gsap.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4});

Here is CodePen demo:

 

See the Pen

See the Pen bGpqxrx by ihatetomatoes (@ihatetomatoes) on CodePen

by ihatetomatoes (@ihatetomatoes) on CodePen

 

 

You should also use the new GSAP3 syntax gsap.to

 

Hope that helps.

Ohh, Yeah Thanks It worked. By the way I am huge fan of your work saw some videos on YouTube.

[Ihatetomatoes 324 Likes (Leader)]

Thank you. Say hi in the comments under some of the videos👍

[jaden 4 Likes (Newbie)]

Since when are we able to select pseudo elements? Isn't there a GSAP plugin CSSRule or something for selecting pseudo like ::after and ::before?

[Ihatetomatoes 324 Likes (Leader)]

@jaden for pseudo element yes you can use the CSSRule but :nth-child is simply selecting the DOM element matching the value.

[ZachSaucier 7,060 Likes (Superhero)]

1 hour ago, jaden said:

Since when are we able to select pseudo elements? Isn't there a GSAP plugin CSSRule or something for selecting pseudo like ::after and ::before?

As Petr said, it's possible using the CSSRulePlugin but we don't recommend it. In most cases if you're affecting something with JS it should be a real element. In some cases it might make sense to animate a CSS variable applied to pseudo-elements. As a last resort we recommend CSSRulePlugin.