midnightgamer Posted August 26, 2020 Share Posted August 26, 2020 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 More sharing options...
Ihatetomatoes Posted August 26, 2020 Share Posted August 26, 2020 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. 5 1 Link to comment Share on other sites More sharing options...
midnightgamer Posted August 26, 2020 Author Share Posted August 26, 2020 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. 3 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 26, 2020 Share Posted August 26, 2020 Thank you. Say hi in the comments under some of the videos👍 Link to comment Share on other sites More sharing options...
jaden Posted August 26, 2020 Share Posted August 26, 2020 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? Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 26, 2020 Share Posted August 26, 2020 @jaden for pseudo element yes you can use the CSSRule but :nth-child is simply selecting the DOM element matching the value. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now