Jump to content
Search Community

Ink like liquid effect with hover transitions

lbarr test
Moderator Tag

Recommended Posts

Like all new members to the forum, I've found an effect that I'm hoping can be achieved with GSAP.

https://www.craftedbygc.com/

 

A sort of abstract-like liquid flow. I'd love to mask it behind an SVG logo.

https://peeke.nl/simulating-blobs-of-fluid

 

But like all first posts in this forum - I have absolutely 0 idea where to start.

 

Any pointers would be amazing! Thank you community ❤️

 

Link to comment
Share on other sites

 

Hey @lbarr

 

Most often, liquid-effects like that make use of WebGL.

So does the one in your first example. I think I saw TWGL in their js source.

 

GSAP can and will be helpful, when wanting to animate effects like these, but straight up building that sort of effect is not what GSAP does/can do - it probably requires WebGL and probably at least a basic understanding of shaders, too - that's not too trivial, though.

 

There are quite a few good WebGL helper libraries out there, like three.js.

 

Best startpoint would probably be to search for pens on codepen, that come close to what you want to achieve and trying to understand, how things are done.

 

 

On further note:

There might be other possible ways you could try to tackle this.

Maybe this thread helps a bit, too:

 

 

Welcome to the forums btw :) 

 

Cheers

Paul

 

 

  • Like 2
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.
×
×
  • Create New...