Angular Horizontal scroll for specific component

[TharunThabeti]

Hi,

I'm trying to make a angular component with only horizontal scrolling on mouse activity. I've been trying this so long. But cannot do it. Any suggestions?

[ZachSaucier]

Hey Tharun and welcome to the GreenSock forums!

 

There are a few different ways you can set this up. The easiest general technique would probably be to animate an element's x property when needed. Can you please 1) describe in more detail the exact effect that you're looking to create (i.e. how the horizontal scroll should work) and 2) please provide a minimal demo of your approach so far (it'd probably be better if your example didn't use Angular but was just in a CodePen or something - then you could move it to Angular later)?

[TharunThabeti]

I want something like this:

 

See the Pen JQOGJe by davide77 (@davide77) on CodePen

 

See the Pen xpxPWe by Sahil89 (@Sahil89) on CodePen

 

Also trigger some timelines soon after div comes to the viewport.

[ZachSaucier]

Hey Tharun,

 

If you remove the event.preventDefault() line that's causing the error you can see that your code works. It performs really terribly because you are creating a new tween every scroll event (which usually happens hundreds of times per section change) but you can fix that by checking TweenMax.isTweening(window); before creating new scroll tweens like I did in the demo below:

See the Pen gOOyyzQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However it might be best to just use a horizontal scroller like the one below because it solves most of your issues for you:

See the Pen YRzRyM by PointC (@PointC) on CodePen

[TharunThabeti]

Thanks for the demo Zach. I've got some important info. But I'm really confused about implementing this in angular. Any Idea?

[ZachSaucier]

9 minutes ago, TharunThabeti said:

I'm really confused about implementing this in angular. Any Idea?

I don't use Angular so I can't help too much. But you should be able to use the things said in this article about Angular + GSAP to get things working: https://medium.com/@philipf5/patterns-for-using-greensock-in-angular-9ec5edf713fb

[TharunThabeti]

I'm confused with the demo though! If possible can you break down into only mouse scroll up and down triggers? Because there are lot of things involved.

Thanks in advance

[ZachSaucier]

57 minutes ago, TharunThabeti said:

If possible can you break down into only mouse scroll up and down triggers? Because there are lot of things involved.

That's a good exercise for you to do