How in the world did he do this?

[Ahmed Khalil 3 Likes (Newbie)]

Hello friends, 

Does anyone know how Simon here created the photos effect for the sample projects? https://simondaufresne.com/ 

Simon, if you are here, you are an absolute legend bro

 

Best,

Ahmed

[Dipscom 3,365 Likes (Superhero)]

Canvas, probably with WebGL. It could have been Three.JS, Babylon or even hand-coded without a library.

[ZachSaucier 7,119 Likes (Superhero)]

Hey Ahmed and welcome to the GreenSock forums. That site definitely uses GSAP and WebGL. I wrote a kind of intro to using WebGL on regular web pages which might help your understanding. 

[Ahmed Khalil 3 Likes (Newbie)]

@ZachSaucier Thanks so much, actually my team is looking to dig deeper in this area, essentially what we are building is a `cool new shopping experience` we come from long experience in ecommerce and want to blend that with webGL and GSAP. Is there other areas you recommend us to explore beside Curtain JS? 

 

Thanks so much

Ahmed

[ZachSaucier 7,119 Likes (Superhero)]

You can do the same sort of thing with any tools that render WebGL (Pixi, Three, OGL, etc.). I used curtains because it's relatively lightweight for doing some image effects and handles the syncing with other DOM elements for you but keeps you from having to write that yourself.

 

The main thing that you'll have to spend time learning is how to write fragment and vertex shaders.

[Ahmed Khalil 3 Likes (Newbie)]

Awesome, Thanks so much.

[leolo69 14 Likes (Newbie)]

Have a look a codrops.com. There you can find many examples like the one you posted.  It's an extremely helpful website with good code examples and explanations.

https://tympanus.net/Development/HorizontalSmoothScrollLayout/index2.html