Create multiple scrollers

[Suyunbek]

I want create website like this https://days.christou1910.com/en/
There are vertical normal scroll in horizontal scroll. How can I do it?

[Cassie]

Heya! This demo and video should help -

 

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

[Suyunbek]

Hi, thank you very much for your reply. Can someone help me make a scroller like this website

 

 

 

I made horizontal scroller without using gsap but how to make vertical scroller inside horizontal scroller

 

See the Pen XWPGOVG by suyunbek (@suyunbek) on CodePen

[Cassie]

That's not a vertical scroller, it's just a nested animation that looks like the section is being scrolled vertically. If I were you I would approach the animations first, separately and without scroll, then when you have all the animations sorted pop them together and hook them up to scroll.

This is quite an adventurous start to GSAP if you're just learning, so try to take it small steps at a time.

 

The way to achieve this is by using the container animation technique I linked to - the current approach you've taken I'm afraid we can't help with. Take a look through the resources I provided and good luck!

[Rodrigo]

Hi,

 

Take a look at this thread as it goes through creating an horizontal animation that "pins" the horizontal movement. Be aware the horizontal pinning is not possible, those examples provided there are just mimicking such feature:

 

Hopefully this helps.

Happy Tweening!