Hi everyone!
This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here.
I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle).
My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step?
The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example.
Does anyone have any ideas of how to solve this problem?
Thanks!