sadmansh

Hi all! So I have an SVG image that is basically an outline of a Chinese letter: https://imgur.com/a/WxcxIgr and I would like to fill this in with brush strokes when the SVG image is hovered, while making sure that the strokes are confined within the outline. Kind of like this: https://imgur.com/a/AdoPnkx The brush strokes will not fill the SVG all at once, but basically as the cursor is moved over it. Can I use GSAP for this? Still pretty new to this so any pointers to the right direction would be highly appreciated!

Hi Zach, thank you so much for your response. Will you be able to tell me how I can use this with React?

Hi, thank you so much. Would you be able to point me to the direction how GSAP would work in this case? Thanks in advance!

Hi all. After some digging I found that CSS grid elements cannot have animation when they are moved around within the grid, so I was wondering if there could be a JS solution to this. I posted this on Reddit first and someone directed me here. Basically what I want is, on a class change on the parent that has display: grid, the child elements will change position using grid-column-start and grid-row-start. I figured out this part, but not quite sure how to animate that change in position. What could be a JS way to achieve this since this is most likely not possible with CSS? Please correct me if I am wrong. My implementation minus the animation: https://codepen.io/sadmansh/full/VweEZqL The dots will move when you click the button up top.