Code Smoothie

Select the definition element when doing SVG transforms on <use>.

I’ve discovered that styling <use>s you must style its definition element under <defs>.

Weirdly enough, when selecting elements and applying styles, GSAP automatically fixes the second way, but only in Chrome, not in Safari.

However, there is a problem with no workaround: this method does not work when staggering animations with GSAP’s staggerTo, etc., because all the elements are transformed together.

The only way I’ve found to stagger animations is to manually duplicate the element:

See also: Reusing Stored elements with the <defs> element by Sara Soueidan.