Jump to content
GreenSock

Anita P.

How to create liquid hover effect with GSAP?

Recommended Posts

Hi Everyone,

 

I was exploring some of the websites for my new project and came across Hello Monday website while checking their code to know what they are using or how they've done mouse hover effect on tiles.

 

After doing some research on Google, I've found attached the closest Codepen, but it's also not doing the same as Hello Monday.

 

Can you please provide some codepen sample where it's performing something similar like Hello Monday, or can you please guide me on how to achieve the same using GSAP? As I am new to this not sure how it'll work or what to use.

 

Screenshot_1.jpg

See the Pen QWpvEjy by georgedoescode (@georgedoescode) on CodePen

Link to comment
Share on other sites

 

Hello Anita, welcome to the GreenSock forums.

 

I don't think you will be able to do something like that with GSAP and DOM elements alone.

 

SVG, like in that pen you posted may be a good approach, but also it may become a bit heavy perfomance-wise in some scenarios. 

 

While GSAP can be helpful with animating just about anything, it is not made for the creation of an effect like that in the first place.

 

It will require quite the setup outside of GSAP to achieve something like that, which we can not really help with - but of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.

 

Your best bet will most likely be some sort of WebGL - but it will probably also not be that easy - as you might have to get familiar with shaders etc.

 

I think on that website they use Pixi.js, but you could also maybe have a look at curtains.js or three.js.

 

A good starting point for effects like these always is the #webgl tag on codrops or their search, where you can find a couple of similar effects, alongside tutorials in many cases, that might be helpful to get you closer to the effect you want to achieve.

 

I hope this will help a bit. Happy tweening!

 

  • Like 1
Link to comment
Share on other sites

I agree and disagree with akapowl.

I agree that you likely aren't going to get a full fledged solution on the forum as this is a complicated effect. However, I believe that this is entirely possible with SVG and GSAP, no WebGL needed.

The general strategy is outlined by the pen you provided.

  1. Get points along the edge of the SVG
  2. Store the orignial position of each point
  3. When the mouse enters, get the position of the mouse
  4. Based on the position of the mouse, animated the SVG points with some logic
    1. here they use a built in function on the generative utils (which looks like a really neat library)
  5. As mouse moves, adjust the SVG points accordingly

This is a gross oversimplification of the effect. It will require experience with frame to frame animation and good knowledge of the DOM, but it IS possible. If I had to guess, it would probably take me several days of playing around to get something even remotely similar. Definitely not something you can just drop in and have work.

Link to comment
Share on other sites

Thanks for the response and right direction, @akapowl and @SteveS

 

As per @akapowl suggestion, I have explored curtains.js and found outstanding examples (links below). Defiantly it's not the exact one, but as both of you mentioned, I'll try it and see what I can achieve. I will share the final solution with the community, so they can use it.

 

Closest example:

https://www.curtainsjs.com/examples/simple-plane/index.html

https://www.curtainsjs.com/examples/gsap-click-to-fullscreen-gallery/index.html

 

Link to comment
Share on other sites

Yes, that is an effect I'm well familiar with. I haven't used curtains but I've implemented it from scratch in ThreeJS. It can be quite tricky to work with. It's worth noting I thought the Hello Monday site used an SVG method, but it is actually using some sort of canvas/3D effect.

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.
×