Creating Image Transition Effect

[han200108]

I want to create this amazing image transition effect that "https://robertborghesi.is/" has. When you hover over his projects, it has this glitchy pixelly  effect that I would love to learn how to create, but I have no clue where to start. Is this effect created using GSAP? If so are there tutorials or documentation I could maybe learn from? Any advice would be greatly appreciated! 

[mvaneijgen]

This is probably done with something like https://pixijs.com GSAP has a tool to control Pixi values https://gsap.com/docs/v3/Plugins/PixiPlugin/ but keep in mind GSAP doesn't draw anything, so yes you can use GSAP to control the animation, but the drawing part you'll need to look in to shaders. No one shader is the same, so you'll probably will not find a tutorial for this effect exactly, but looking in to shaders is your best bet. 

 

There are some discussions on shaders on the forum with good resources on the topic https://gsap.com/community/search/?q=shaders&quick=1&type=forums_topic&nodes=11 

 

Side note, not to discourage you, but I've been coding for years and learning shaders is still on my bucket list I've dipped my toe in a few times, but can't wrap my head around this 🤯 good luck and hope you've paid attention in math class! Happy tweening

 

 

[Rodrigo]

Hi,

 

This site seems to be using THREEJS (which is like the de-facto go-to tool when using shaders in web development).

 

Here is a collection of some ready-to-use effects that should be enough to get started:

https://real-world-shader.jankohlbach.com/

 

Also as @mvaneijgen mentions learning shaders is not the simplest thing to achieve, you'll need a basic understanding of some trig functions (mostly sin and cos), as well as some basic matrix operations:

https://en.wikipedia.org/wiki/Trigonometry

https://en.wikipedia.org/wiki/Matrix_(mathematics)

https://byjus.com/jee/matrix-operations/

 

I strongly recommend to check this free resource:

https://thebookofshaders.com/

 

Happy Tweening!