Scrolltrigger animations on css-based horizontal scrolling website

[youngpadawan]

Hello 

 

I'm currently working on a website that scrolls horizontally by using css only, exactly like in the codepen. Everything is working fine and is actually finished, but now I want to add add ScrollTrigger animations to certain elements in the sections and somehow can't get it working.

 

Is there a way to position the markers on the x-axis and is it actually possible to use ScrollTrigger in my setup?  

I see a lot of examples where the horizontal scroll is done by GSAP but then the scrollbar stays on the right and the markers work fine.

 

Thanks for your help!

See the Pen rNwPpLP by young_padawan (@young_padawan) on CodePen

[OSUblake]

Welcome to forums @youngpadawan

 

Your demo took me a minute to figure out! I've never seen anyone do horizontal scrolling like that, so +1 for creativity.

 

Can you put what you've tried in your demo? You'll probably have to set your scroller like this.

ScrollTrigger.defaults({
  scroller: ".outer-wrapper"
})

 

 

 

[youngpadawan]

Thanks for your help, Blake!

I actually found this on CodePen when I was trying out different horizontal options and found it very interesting too.

 

I updated the pen with one of the things that need an animation.
There's a sidebar that slides open or closes by clicking it. When the last section is in the middle of the viewport, it should automatically open and then close when you scroll to the other side again.

The 'top center' start worked fine for this kind of things on vertical sites I made before, but here it's somehow triggered in the first section here. What am I doing wrong?

[OSUblake]

I think you might have to calculate the start and end like this.

 

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

 

Maybe @GreenSock can explain why that is necessary. But like I said, this is rather unusual case as I've never seen anyone do scrolling that way.

 

[youngpadawan]

Thank you, that's working fine!

[youngpadawan]

Okay, I discovered that this way of horizontal scrolling doesn't work in Firefox so I built it again using ScrollTrigger for the horizontal scroll, exactly like here: 

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

 

I expected the animation of the sidebar to work with start: () => `top+=${innerWidth * 0.5} center`, etc. but it somehow doesn't. With the regular start: 'top center', and variations it's also not behaving as it should. What's the trick here?

[akapowl]

Hey @youngpadawan

 

Since this demo actually is only faking the horizontal scrolling via a tween, you would have to calculate things based on the (containers offset top - which here isn't neccessary as it will always be 0 - and) each element's offsetLeft you want to have triggers on. Then there would also be an 'offset' you'd have to incorporate into the calculations, as the fake-horizontal tween and the scroll-duration are not equal - and things become very complex very quickly. I wrote about it a bit more in depth in this thread here

 

 

 

 

Good thing, the brand new GSAP 3.8 comes with a brand new containerAnimation property that makes things waaay easier than they were before.  Hope it helps  

 

From the docs:

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

[youngpadawan]

Wow thanks, this is really great!