Horizontal ScrollTrigger

[Cre]

Dear GreenSock-Team,

 

first of all: Congratulations! ScrollTrigger is really impressive and my mouth is still open. Nevertheless I probably came to the limit of this Library.

I really like the Horizontal Scroll-Demo, but I didn't managed to include 2 things:

1) I like to add a kind of parallax-effect of the (in this case) headlines from left to right. I didn't find a way to target the headline and let them sit in the original position (in this case centered) when snapped to a slide and using the scrub-method, so you have full control of the (in this case) headline.

2) I doesn't seem to be possible to use the ScrollToPlugin to go to a specific Slide, since it's rather a horizontal movement. I also tried to use the native supported window.scrollTo(x, y)-function. Funny enough in this case it works only if you enter a y-value. It there a possibility to also use the ScrollToPlugin?

 

Thanks in advance,
John

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

[LukasZahorec]

Hi, I have quite the same problem + some more questions. I am using horizontal scroll, similar to demo which Cre posted, with a lot of sections with different widths. Horizontal scroll works ok.

 

But questions is, what should I do to animate elements in sections when they reach trigger - container. This seems to not work with horizontal scroll, defined like in demo.

 

2nd question. It is possible to ease horizontal scroll, I have a lot of sections in container, and I am using horizontal scrolling like in demo, and then generated "vertical" scroller is small and scrolling is very fast and sensitive.

[ZachSaucier]

Hey Cre and Lukas and welcome to the GreenSock forums.

 

4 hours ago, Cre said:

I didn't find a way to target the headline and let them sit in the original position (in this case centered) when snapped to a slide and using the scrub-method, so you have full control of the (in this case) headline.

Sorry, I'm not understanding what you're wanting to do here. Can you please create a minimal demo of the situation and explain what you're wanting to happen?

 

4 hours ago, Cre said:

I doesn't seem to be possible to use the ScrollToPlugin to go to a specific Slide, since it's rather a horizontal movement. I also tried to use the native supported window.scrollTo(x, y)-function. Funny enough in this case it works only if you enter a y-value. It there a possibility to also use the ScrollToPlugin?

It's definitely possible! But since the horizontal scroll is faked using transforms you just need to animate to the y scroll position that would be equivalent to the horizontal distance that you want. So to go to the second slide you'd animate to a y scroll position of the width of the viewport. Does that make sense?

 

1 hour ago, LukasZahorec said:

what should I do to animate elements in sections when they reach trigger - container. This seems to not work with horizontal scroll, defined like in demo

Please make a minimal demo of your situation (and probably use a new, different thread than this one so we won't be having two different conversations at the same time).

 

1 hour ago, LukasZahorec said:

It is possible to ease horizontal scroll, I have a lot of sections in container, and I am using horizontal scrolling like in demo, and then generated "vertical" scroller is small and scrolling is very fast and sensitive.

Sure. You're kind of asking two questions here. To ease things use scrub like scrub: 1. To change the scroll distance, you just need to use different start and/or end values. Without seeing your demo it's hard to make more specific recommendations for what the values should be.

[Cre]

Hi Zach,

really nice to hear from you, thanks for your answer and sorry for not being unclear. I added a small video which shows my desired effect: Simple parallax with scrubbing enabled.

 

[ZachSaucier]

Thanks for making it more clear. 

 

The basic steps to create that are:

1. Position the sections of text and background to have be all horizontal.
2. Create at timeline.
3. Create a tween that moves the background the distance you want it to go inside of that timeline starting at the beginning.
4. Create a tween that moves the text sections the distance you want them to go inside of that timeline starting at the beinning.
5. Make sure the durations of both tweens are the same.
6. Apply a ScrollTrigger to the timeline with scrub. 

We're happy to help you get it working if you run into specific issues. Please just provide a minimal demo so that we can see and edit the code ourselves