Image transition by pattern

[kreativant]

Hey guys,

 

im new to GSAP, figured out some stuff - but not what i wanted to do. Its an Image transition by jpeg-pattern.

 

When you scroll down: https://flowstudio.co/ - there are images, when u hover its getting transformed to another image by an pattern.jpeg. Pattern is displacement.jpg.

 

Somone did this before?

Dont found examples for this..

[PointC]

It looks like they're using three.js and that's the displacement map for the transition. You could make it happen with a Pixi displacement filter too.

 

http://pixijs.io/pixi-filters/tools/demo/

http://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html

 

You'll want to use a Power of two image (512x512, 256x256, etc.) for the best results.

 

Good luck with your project.

 

[kreativant]

@PointC Got it! Thanks for your help. Found the solution with your answer. Found this one -> https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/ - its exactly that effect.

 

Thank you