Animate path of SVG symbol?

[Robert Wildling]

Hi, GSAP magicians,

 

I am having trouble with animating a path of a SVG that is referenced as symbols.
The codepen shows a left side, where the SVG is implemented "regularly" in the DOM flow. There, the intended animation works (the rectangle needs to be hovered).

The same thing should happen on the right side, where the SVG is referencing a symbol instead.

 

Does anybody of you guys know what I am doing wrong?

The console shows that the original SVG is "copied" to a shadow-root - can "shadow DOM" be accessed anyway?

 

Much appreciated!

Thanks! 

See the Pen mQyvrX by rowild (@rowild) on CodePen.

[Carl]

I don't think you can target fragments in the shadow DOM. 

Please read this article

https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

 

 

[Robert Wildling]

@Carl Thank you for clearing that up for me and for pointing me to that great article! Much appreciated!

[elegantseagulls]

@Robert Wildling,

 

Good article @Carl! Also, a tip, when animating symbols, or sprites, it is vary useful to use CSS Custom Properties, so that you can animate a specific instance of the symbol or sprite, rather than all of them at once.

 

See the Pen YOWoEa by elegantseagulls (@elegantseagulls) on CodePen.

 

[Robert Wildling]

@elegantseagulls Nice!!! Thanks for sharing!

[anishjana_]

Hi, 

Can I animate an svg as the below gif without a hand on a fabric.js Canvas.

b5c0c6f0-3893-11eb-a339-1fc80f338364.svg

[ZachSaucier]

@anishjana_ DrawSVG animates SVG, not canvas. With that being said, you can use GSAP to animate anything, so if you had an object that is determining the length of a line in canvas you could animate that object, re-render, and it would act similarly to what DrawSVG does.