Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Catalin R.

Broken glass effect on image

Recommended Posts

Do you mean the image should animate the cracks when you hover? Or are you looking for the cracked pieces to fall away. 

  • Like 1
Link to post
Share on other sites

Not sure if this will help, but it reminded me of the images you shared: 

See the Pen KJFiq by Birky (@Birky) on CodePen

 

  • Like 5
Link to post
Share on other sites

oooooooooh... that's pretty neat.  :shock:

  • Like 1
Link to post
Share on other sites

Nice effect!

But, I have a gallery and I need an hover effect. It should be smooth, pretty fast and the image should look like a broken glass.

Any idea should help me!

Thanks and happy tweening!

Link to post
Share on other sites

One thought that comes to mind would be using two images and reveal the cracked version with a mask or clip-path that radiates from a central point. Maybe something like this?

 

See the Pen mLBbpB by PointC (@PointC) on CodePen

Of course that method involves more asset prep. I don't how many images you'll have or how big they may be, but it could work if you don't have too many.

 

The other idea would be creating some vector art for the cracked glass pattern and using DrawSVG to animate the branches. Hopefully that gives you some ideas. Happy tweening.

:)

 

 

  • Like 7
Link to post
Share on other sites
On 5/5/2018 at 4:50 AM, GreenSock said:

Not sure if this will help, but it reminded me of the images you shared: 

See the Pen KJFiq by Birky (@Birky) on CodePen

 

How can i achieve this animation with fixed height and width ?

Canvas is loading for actual size of image's height and widht . 

  • Like 1
Link to post
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.

×