ScrollTrigger with Observer

[kamranimtiaz 0 Likes (Newbie)]

hi @PointC @GSAP Helper

I hope that you are doing great. I'm super new to Gsap Forum.

I was wondering if its possible to use Observer with ScrollTrigger container animation? I'm trying to create a website with multiple horizontal sections.
My main problem now is the animations on each section and I'm unable to trigger it properly. I know if I was using container-animation then it would be easy but with Observer how can I trigger different animations on different sections?

Hopefully my question is clear. 

Thanks,
Kamran

[mvaneijgen 1,540 Likes (Superhero)]

Hi @kamranimtiaz welcome to the forum! You don't have to mention anyone in particular to get help here.

 

I've never seen ScrollTrigger and the Observer plugin be used in the same project, it is usually one or the other depending on your needs. 

 

With ScrollTrigger you can fake horizontal scroll by just moving the whole container to the left when being in a particular section, this is usually pervert, because you don't want users to switch scroll direction  halfway down your page. Down here is an example, but there are loads more on https://greensock.com/st-demos/ I would suggest forking one of the examples that most closely suit your needs and take it from there. Then if you're stuck post back here with the demo you've created and a clear question of what isn't working.

 

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

 

Hope it helps and happy tweening! 

[Rodrigo 5,059 Likes (Superhero)]

Hi,

 

Check this example from the ScrollTrigger collection

 

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

 

Hopefully between @mvaneijgenexample and this one is enough to get you started.

 

Happy Tweening!