Target SVG by parent container

[mge]

Hello dear GSAPers,

 

a (hopefully) short question, after having dived into GSAP the last few days, but unfortunately having little idea about further javascript. 

 

The following problem: I would like to build a button in which I animate the SVG it contains (no SVG-related functions, only scale etc.). My structure is as shown in the screenshot, a container with the class .mge-button-icon and in it the SVG icon with different IDs per button.

 

Via CSS I can address the SVG with

.mge-button-icon svg

fill it, rotate it, etc.

 

My question: How can I insert ".mge-button-icon svg" into my tween? 

 

What I have - and doesn't work:

tl.to(".mge-button-icon svg", 0.4, {right: 2, ease:Power4.easeInOut}, 0);

(the rest of the timeline works, only the svg is not captured).

 

Please excuse me for not setting up a CodePen for this, I'm working in a pagebuilder (Oxygenbuilder) where the special icon-svg-structure comes from.

 

Thank you very much for your help!
mge

 

[ZachSaucier]

Hey mge and welcome to the GreenSock forums.

 

Based solely on the information that you've provided, everything should be working. It should animate the <svg> element to a right position of 2px. If it's not working, you'll need to provide additional info (hopefully a recreation of the issue using CodePen ). 

 

With that being said, you're using the old syntax for your duration and easing and we recommend upgrading  to the newer syntax.

[mge]

Hey Zach,

 

thanks for your quick reply!

 

Since you are sure that everything should work so far I have made myself again on the search for errors elsewhere... And you were (of course ) right. The positioning of the absolute element didn't work with CSS either, so I had to fix it here. Now everything works perfectly.

 

Thanks for your help & the hints!