Jump to content


How to achieve a goo effect

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.