How to achieve a goo effect

[Keaton88]

Hi. I've been stuck for a while on this. The goal is to tween a bubble coming from one circle to another circle while having a 'goo' effect at the exit and entry points. For the filter to have effect, I must place the bubble circle within the starting circle's group, then at some point before the bubble finished following it's designated path, remove it from that starting circle's group, apply the filter to the end circle, and append the bubble to the end circle's group. Does anyone have any thoughts on how to do this while maintaining a smooth animation?

See the Pen aLYwjN by TomasOchoa (@TomasOchoa) on CodePen

[PointC]

Hi @Keaton88

 

I haven't built anything like that, but a quick search of CodePen shows a couple thousand results for 'goo' . There seem to be several ways to approach it. Have you looked through some of these demos?

 

See the Pen ?q=goo&limit=all&type=type-pens by search (@search) on CodePen

 

Others may jump in with more advice or info. Happy tweening. 

[Dipscom]

Is there any particular reason why you don't put the "goo" filter on a <g> that encapsulates all circles?

 

See the Pen VMxWNp?editors=1010 by dipscom (@dipscom) on CodePen