using gsap scrooltriger + smooth-scrollbar.js to replicate a menu

[mahdy151]

hi

first of all sorry for my english

im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool

it has some skew on scrolling and its smooth

and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation.

so i try to make it with gsap becuase why not😃

so here is my long list of question:

1- why my last <li> element is not showing?

2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site?

3- how to achive the submenu transition effect using gsap and vanilla js(by the way i think they use some overflow : hidden trick , but i havent any success for now)?

thank you so much for your greate framework.

 

See the Pen XWNvopO by mahdy151 (@mahdy151) on CodePen

[GreenSock]

On 3/24/2021 at 3:38 PM, mahdy151 said:

1- why my last <li> element is not showing?

That looks related to the 3rd party Scrollbar library. Unfortunately, we didn't author that and can't offer free support here for that library. 

 

On 3/24/2021 at 3:38 PM, mahdy151 said:

2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site?

When you say "choppy", what do you mean? I definitely see very strong skews when scrolling quickly like that - is that what you mean? It's because the velocity value would be very high when you scroll quickly, so the skew would also be high. You can cap it if you don't want that. 

 

On 3/24/2021 at 3:38 PM, mahdy151 said:

3- how to achive the submenu transition effect using gsap and vanilla js (by the way i think they use some overflow : hidden trick , but i havent any success for now)?

Are you asking us to build something for you? Did you have a specific GSAP question for us? Unfortunately we don't have the resources to offer free general consulting services or analyze live web sites and show you how to build them, but we'd be glad to answer any GSAP-specific questions. 

 

Happy tweening!