Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
midnightgamer

Selecting nth child

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? 

Share this post


Link to post
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 4
  • Thanks 1

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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.

×