Risko

Hi guys, I am trying to replicate an effect I have seen implemented with animate.js while using some sort of parallax effect and morph, and would prefer using GSAP for this. Original pen (replicated from a Codrops article on svg Morphing) can be found there: Ultimately, I'd like to "invert" the condition of the effect, meaning that when my mouse gets close to the shape, that shape gets "attracted" or snaps to the mouse, up to a point where it snaps back to original place. Best way to put it, I'd like to make a "Magnetic goo" that's dynamic when the mouse enters my container, and snaps back when mouseleave. (that's what I didn't quite like with the original implementation, it goes all over the place). I could probably just alter the original pen above and transform it to GSAP (anyway to do that btw?), but mouse positions are still quite obscure to me and since I'm new to GSAP and wanna learn it, I guess it's better to ask the pros! Any pointers to the best technique with a starting approach would be very well appreciated! Approach: - I've thought originally of using the "paralaxit" code of @Sahil as a starting point, in a related post here: So that's what I implemented so far in my pen. But I have no idea how to change the d values of my path themselves slightly to follow the same idea, instead of the shape as a whole and its scale. My second approach was potentially to use gaussian blur and color matrices by creating a small "dot" that would alter my shape when the mouse enters the container, similar to what was done in the pen below. Would that be a better approach? Thanks in advance for your help and pointers! PS: If I need to start with a simpler shape, to understand the approach better and simplify calculations, I'm down for that. I'm as much interested in understanding the process itself than achieving the result I have in mind!