Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pkid

Elastic Frame — Mouse Interaction

Recommended Posts

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

Share this post


Link to post
Share on other sites

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:

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the answer Zach! Will take a look at those links and share here if I have a solution.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×