[Using GSAP ScrollTrigger for Horizontal Scroll]

1 hour ago, Cassie said:

We've shown you multiple ways this can be achieved! There are many working demos in this thread now. Am I missing something?

I am sorry but those demos are completely different. I do not have panels/sections inside. I learnt the following from your previous comment. The 'containerAnimation' scrolls to the next panel/section & to the previous panel/section if scrolled back. Those panels are also 'pinned'. My container does not have full width/full height taking panels/sections. I have written a custom scroll function to scroll forward/ back '20px' (Could be any value given) of the container.

Anyways I was able to solve my demo 

See the Pen NWYXEoB by msanjeetaxioned (@msanjeetaxioned) on CodePen

, after seeing this example. 

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

 This above demo & the site I linked in my previous post is similar to what I wanted to achieve.

In that I also used display: none for scrollbar. So thanks @mvaneijgen for that and thanks @Cassie for replying so many times.

[Using GSAP ScrollTrigger for Horizontal Scroll]

Okay, thanks. So now I understood what the 'containerAnimation' does.

So this will not do anything in my project?

So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation?

I wanted to create something similar to this https://sarahfatmi.com/en

The above site is created using GSAP3, so what I am trying to achieve should technically be possible. I tried to see it's code but failed to understand it, as it's a bit too complicated.

Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given. They should also reverse on scroll back (Basically 'scrub' behaviour). Similar to the linked site.

@Cassie Thanks for the answers.

[Using GSAP ScrollTrigger for Horizontal Scroll]

Thanks for the answers.
@Cassie I need to hide the scrollbars as it's required.

I have tried doing it using 'containerAnimation' aswell. Here is the demo: 

See the Pen NWYXEoB?editors=1010 by msanjeetaxioned (@msanjeetaxioned) on CodePen

But it does not work. If you turn the markers 'on'(please make sure to view this on a big screen as the markers make scrollbars appear if they are outside the display area) ,you can see that the 'start/end' markers don't move with the '.box1' element when the '.main-container' is scrolled. It shows that the 'ScrollTrigger' does not work for the custom scroll function I have written.

Can you let me know if I have done/used something wrong in this demo? Or have any solutions to this?

[Using GSAP ScrollTrigger for Horizontal Scroll]

Hello I am new to using GSAP 3 ScrollTrigger.

I have this '.extra-long-container' which as the name suggests is very long horizontally (Width: 7000px). In it there could be multiple elements placed at any 'x' position. I have only placed one box ('.box1') in the codepen example but there could be many. Basically I want them to animate when they come into viewport horizontally.

Note:
For this I did not want both the scrollbars to display. Due to the scrollbars being hidden the JS 'scroll' event does not fire. So I had to write a custom function to perform horizontal scroll on 'mousewheel' event ('onscroll' function in JS).

I have seen a lot of answers in forum, Codepen demos: eg: 

See the Pen mdrrbyo by oldskool123 (@oldskool123) on CodePen

, Container animation, some videos eg. this, this but they all have panels (full width & height talking panels as children) in them which I don't want. I only want to place some elements/objects at specific positions in container. They also have a vertical scrollbar in them which I do not want. I do not want either of the scrollbars.

Also as you can see in the demo the 'box1' is not at it's default position(It has been applied a transform). I have no idea why. It would be helpful if you could answer that aswell.

Please reply if you have any doubts.

This is my demo Codepen link: 

See the Pen GRxyBZj by msanjeetaxioned (@msanjeetaxioned) on CodePen