Repelling Interaction with Elements

[Ramate]

Hey!

I have been studying possibilities to create a repelling effect triggered by my cursor on the "blob-mask" elements of that animation I am creating. The fact is that, after trying different approaches, I have no idea how to  do something like this.

I found this topic and tried to apply what I leaned there. But the only thing I could do was to break my original code

Does someone could give me some guidance on that task, I am pretty lost.

Thanks a lot! 

 

See the Pen abjLjvZ by QuitoSometimesMarcos (@QuitoSometimesMarcos) on CodePen

[Rodrigo]

Hi,

 

As you mention this is not a minor job as it can become a very tall task to complete, since there are many factors that come into play. If I was you I'd look into some particles or physics libraries and see what they can do. I think there is a really good chance that a few of them can actually do particle/elements repulsion based on an event. In this thread a few options were mentioned so you can check those resources:

 

Also remove those filters from your CSS they're basically killing performance as they drain the life of any CPU. Thread carefully with Blur filters since that is extremely expensive performance-wise.

 

Sorry I can't be of more assistance, but creating something as complex as this is beyond the scope of the help we can provide in this forums. If you have a GSAP related question be sure to let us know.

 

Good luck with your project!

Happy Tweening!

[Ramate]

Thanks a lot Rodrigo,

I will definitely take a look on the resources you recommended, hope I can find a solution there. 

Also I will take a look on the possibility of removing the css filters to improve the performance. At the moment I know no other option to achieve the effect of merging bubbles, but there must be another option.

Thanks again <3

[Rodrigo]

4 hours ago, Ramate said:

Also I will take a look on the possibility of removing the css filters to improve the performance. At the moment I know no other option to achieve the effect of merging bubbles, but there must be another option.

You could look into the MorphSVG Plugin:

 

Also canvas/WebGL (PIXIJS) is another option with very good performance:

https://pixijs.com/

 

Happy Tweening!