Jump to content
GreenSock

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

Create a blur effect (on video) and remove the blur on the part hovered

Recommended Posts

Hello all,

 

I'm looking for how to achieve a blur effect in front of a video. This blur effect must disappear on a limited surface on the part hovered.

 

Here is the result I would like to achieve with Greensock https://revolution.themepunch.com/paintbrush-effect-add-on-for-wordpress/

 

Do you have an idea of how? Use an SVG? Canvas? I'm lost…

 

 

Thank you !

See the Pen NmxBZX by jimmylet (@jimmylet) on CodePen

Link to comment
Share on other sites

That's a pretty cool effect. Not sure how they do it. I tried inspecting the page but it wasn't immediately apparent. Could probably take some time to dig through it all. 

  • Like 1
Link to comment
Share on other sites

Hello @jimmylet and welcome to the GreenSock forum!

 

Yes a cool effect indeed, i will take a crack. Based on inspecting that page.

  • It has the main image that is stacked on the bottom.
  • Then a <canvas> tag is stacked above the main image with an opaque blur that is either a transparent blur or it's a canvas sample copy of the main image with an added blur effect.
  • So basically 2 layers stacked, of the main image on the bottom and the blurred canvas image on top.
     
  • Then mouse movements are detected when hovering over the canvas image to reveal a paintbrush mask that allows full transparency so you see through the <canvas> tag and see the main image underneath.

That is what i got from inspecting that slider. I only saw the effect work in Chrome, but Firefox and MS edge did not show the slider for some reason, only Chrome did.

 

Happy Tweening! :)

  • Like 4
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.
×