Jump to content
Search Community

Selecting nth child

midnightgamer test
Moderator Tag

Recommended Posts

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? 

Link to comment
Share on other sites

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.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
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.
×
×
  • Create New...