Annelies Posted February 29, 2020 Share Posted February 29, 2020 I have been looking for a way to liquify the container of an image on hover. What I saw on the happy egg website on the GSAP showreel is very similar to what I need. I have no idea how I would even start or in which direction I should be looking to create something similar. If I could get some tips or examples to look at, it would help me a long way! Link to comment Share on other sites More sharing options...
mikel Posted February 29, 2020 Share Posted February 29, 2020 Hey @Annelies, Welcome to the GreenSock Forum. That could be a case of svg and clipPath See the Pen WyByGo by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Annelies Posted February 29, 2020 Author Share Posted February 29, 2020 How would you go about making it move along with your cursor movements? It kind of moves along with how your cursor moves which makes it a bit more interactive Link to comment Share on other sites More sharing options...
mikel Posted February 29, 2020 Share Posted February 29, 2020 Hey @Annelies, You could search for mousemove in this GreenSock Forum and you will find solutions like this one See the Pen GRgOLNv by mikeK (@mikeK) on CodePen Please make a codePen with your case if you have further questions. Happy searching ... 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 1 hour ago, Annelies said: How would you go about making it move along with your cursor movements? It kind of moves along with how your cursor moves which makes it a bit more interactive To start, you need to learn how to animate Bezier curves. Going through this thread might be a good start. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 29, 2020 Share Posted February 29, 2020 1 hour ago, mikel said: That could be a case of svg and clipPath And yes, a clipPath or mask is the final part of how to do an animation like that, but you first need to master the animation of Bezier curves i.e. animating points. 2 Link to comment Share on other sites More sharing options...
Fredy Rivas Posted August 7, 2020 Share Posted August 7, 2020 hi @Annelies, might be a long time since you asked but, here's where you will find your way: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/ even when it's possible to achieve something very similar with gsap, webgl will give you exact control. hope it helps cheers Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 7, 2020 Share Posted August 7, 2020 57 minutes ago, Fredy Rivas said: webgl will give you exact control As does GSAP But WebGL is great for performant animation effects with images. It pairs great with GSAP. Thanks for sharing the article link! 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