ScrollTrigger – Animate horizontal sections, triggered by either vertical or horizontal scroll

[xcfava]

Hey,

 

I'm building a website that uses the exact code in the CodePen from one of your demos. But I'm looking to see if it's possible to trigger the animation on either vertical or horizontal scroll, rather than just one or the other. 

 

I've read into the `horizonal: true` parameter, but I'm struggling to find anything about triggering an animation on both scroll directions.

 

The effect I'm looking for is exactly the same as on this example here: https://talent.foam.org/projects/golden-boy

 

Any help would be greatly appreciated,

 

Thanks!

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

[OSUblake]

Welcome to the forums @xcfava

 

A new containerAnimation feature was added in 3.8 that should make that a bit easier.

 

 

[xcfava]

Hey @OSUblake,

 

Thanks for the welcome to the forums and for sharing the link to the new containerAnimation feature. I spent a couple of days looking at the docs and trying out some things but I'm still no further forward.

 

From my understanding, the containerAnimation feature only allows you to trigger animations inside an existing scrollTrigger animation. But I'm looking to allow the user to scroll vertically or scroll horizontally to trigger the same horizontal movement of the page.

 

I've found some examples on the forum of people trying to do similar things, but they've tied it into the window.addEventListener function on wheel, rather than using a built-in scrollTrigger solution. But maybe there isn't a built-in solution to what I'm trying to do.

 

Thanks!

[OSUblake]

If that's what you're going for, then you would need to use wheel listener. ScrollTrigger isn't going to do that for you. ScrollTrigger is merely a tool to watch changes in the scrollbar position and then trigger an animation. I would say that having a horizontal scrollbar might not be the best idea because it could confuse people.