Guest Posted December 25, 2019 Share Posted December 25, 2019 Hello everyone, I was wondering how it would be possible to achieve the following elastic border effect around the images on the Hello Monday website. Waaark's pen here creates a somewhat similar thing but I mainly was wondering how you can, for instance, achieve a similar effect (similar to the Hello Monday website) around the edges of a grid of divs inside a flexbox. Thanks! See the Pen ENRvvq by waaark (@waaark) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 26, 2019 Share Posted December 26, 2019 Hey pkid and welcome. This effect is done using WebGL. The pen you linked to above just uses <canvas>. If you are trying to recreate it completely from the ground up it will probably take a while to create because you need to understand WebGL, especially shaders. However, you could modify other similar effects to do that sort of effect like these: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/ https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/ 2 Link to comment Share on other sites More sharing options...
Guest Posted December 29, 2019 Share Posted December 29, 2019 Thanks for the answer Zach! Will take a look at those links and share here if I have a solution. Link to comment Share on other sites More sharing options...
veronica Posted July 8, 2020 Share Posted July 8, 2020 Hey, pkid, did you find the solution in the end? 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