Ramate Posted January 17, 2023 Share Posted January 17, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 17, 2023 Share Posted January 17, 2023 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! 1 Link to comment Share on other sites More sharing options...
Ramate Posted January 18, 2023 Author Share Posted January 18, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 18, 2023 Share Posted January 18, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now