is that possible to create a website like this with gsap?

[artstyle]

https://www.roninamsterdam.com/

 

i mean the whole site with gsap? sections change and transitions? if yes how would you do it?

[ZachSaucier]

Hey artstyle. That site is built with GSAP. With that being said, GSAP is just one tool used and much of it is custom code. If you have a specific question feel free to ask and we'll do our best to point you in the right direction.

[artstyle]

im interested in how to:
1. after preloader the scene zooms to "R" letter
2. first scene with R letter, the background moves onmousemove

3. transitions from 1 to 2 to 3 to 4

 

is that possible to create a whole website like this saving all the smooth transitions between the scenes ...

[ZachSaucier]

26 minutes ago, artstyle said:

after preloader the scene zooms to "R" letter

The site uses clip paths or masks to do the letters. Looks like they're using Canvas to do so.

 

26 minutes ago, artstyle said:

the background moves onmousemove

In a mousemove listener, move the image and the mask a bit.

 

27 minutes ago, artstyle said:

transitions from 1 to 2 to 3 to 4

I assume you mean the sections from left to right (between RONIN showing different projects). Again, it's just animating the images and masks.

[artstyle]

1 hour ago, ZachSaucier said:

The site uses clip paths or masks to do the letters. Looks like they're using Canvas to do so.

 

In a mousemove listener, move the image and the mask a bit.

 

I assume you mean the sections from left to right (between RONIN showing different projects). Again, it's just animating the images and masks.

u can slide left or right to switch letters.  and you can slide down to see the project... i mean transitions in the project when u slide down

[ZachSaucier]

15 minutes ago, artstyle said:

i mean transitions in the project when u slide down

Also a mask and image translation. Then some other translations once those first animations finish.