How do I make this full screen animated image gallery

[Mehran Zarei 0 Likes (Newbie)]

Hello

How can I make this image gallery like that:

https://asmobius.co.jp/

 

I realized that is written by GSAP, but is there any similar demo for GSAP or any pieces of that Image gallery (like circle navigation or scroll navigation etc.)?

 

 

Please help me to make somethings like that.

Thanks in advance.

[Cassie 4,224 Likes (Superhero)]

Hey Mehran,

There's a lot going on in this demo.

definitely some shaders - 

https://thebookofshaders.com/01
https://www.curtainsjs.com/

The circle is an SVG - there's some stroke animation there and also some masking.

https://greensock.com/docs/v2/Plugins/DrawSVGPlugin

They're listening to click, drag and mouse events to update the slider.

It's pretty complex. If I were you I'd start by making a simple image carousel, adding the right events, then looking into SVG path drawing, if you're still feeling brave then dig into shaders.