Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anomie

ScrollTrigger behavior for horizontal sites that scroll vertically

Go to solution Solved by akapowl,

Recommended Posts

Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan.
Thanks to remote work, I can work until this time.

 

I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made.

I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it.

 

Well, the reason is that I can only read English through DeepL. ....
If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo.

 

If you can help me, I will pray for your health from a faraway land. Thank you very much😉

 


海外の皆さん、こんにちは。日本は今夜の2時です。
リモートワークのおかげで、この時間まで仕事ができます。

 

ScrollTriggerでアニメーションをしたいのですが、私の作ったデモではどうやら難しいようです。

どうすればいいんだろうと考えて、行き着いたのが"ScrollTrigger.proxy"だったのですが、公式のドキュメントを読んでもよくわかりませんでした。

 

まあ私がDeepL越しでしか英語を読めないのが原因なのですが。。。。
もし心優しいGsaperがいたら、どうすればScrollTriggerをデモで動作させることができるのか教えてください。

 

もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします🙏

 

See the Pen PoWGmZB by usagino (@usagino) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @anomie

 

There are a couple of demos for fake-horizontal scroll on the ScrollTrigger demos-page.

You don't actually need the scrollerProxy for that effect - only if you wanted to incorporate some sort of smooth-scrolling.

But as you can see, you can get a pretty similar smooth-ness by setting the scrub to a numerical value (as in the demo below).

 

Note that I added some pieces to your CSS

 

body
  margin: 0
  padding: 0
  overflow-x: hidden

  .container
    width: 100vw
    height: 100vh
    background: #F8F3E8

 

See the Pen 4c3dd7695847da1b4a313248f153c018 by akapowl (@akapowl) on CodePen

 

 

This is just a very basic example, though.

 

If you wanted to set triggers for each of your images, you'd maybe have to do things a bit differently and (because this is just faking a horizontal scroll) calculate the starts for those triggers yourself. This example from mentioned demos-page should give you an idea on how to achieve that.

 

Happy scrolling.

 

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

 

 

  • Like 2
Link to comment
Share on other sites

thx @akapowl 

 

I was able to scroll using the method you showed me.

 

Thanks for sharing the demo too. But the first calculation of the trigger looks very difficult.
The markers are also vertically oriented.
Is it not possible to specify the start value as "left" for each item like in the traditional ScrollTrigger?

 

教えていただいた方法でスクロールすることができました。


デモも見せていただきありがとうございます。しかし、最初のトリガーの計算はとても難しそうですね。
マーカーも縦長ですし。
従来のScrollTriggerのように、アイテムごとに開始値を「left」と指定することはできないのでしょうか?

Link to comment
Share on other sites

Additions

After adding the code below to the bottom of the JS code, the desired behavior was achieved, but the first text element was lost. I'm not sure why. 😭

"Scroller-start" works, how can I control it on a per-item basis?

 

追記

下のコードをJSのコードの一番下に追記したら目的の動作は近づいたが、初めのテキストの要素が無くなってしまった。どうしてだろう。

"Scroller-start "は動作しますが、アイテムごとに制御するにはどうしたらいいですか?

 

const el = document.querySelectorAll('.gallery__works__item')[3]
    el.style.border = '1px solid red'
    ScrollTrigger.create({
      scroller: '.gallery',
      trigger: el,
      horizontal: true,
      markers: true,
      onToggle: (self) => console.log('toggled, isActive:', self.isActive),
    })

 

See the Pen OJWRrjg by usagino (@usagino) on CodePen

 

Link to comment
Share on other sites

 

6 hours ago, anomie said:

The markers are also vertically oriented.

Is it not possible to specify the start value as "left" for each item like in the traditional ScrollTrigger?

 

That is because you are scrolling vertically and only 'faking' the horizontal scroll with a tween.

You can't expect ScrollTrigger to listen for horizontal scrolling when that is not what you are actually doing.

 

So the way you're trying to set the triggers with the code snippet you posted won't work on this.

The second demo I posted shows how to do the calculations for individual sections/elements.

 

And this thread here contains a detailed explanation about why you have to include an 'offset' in your calculations ( in short: because the amount that the tween which is moving the gallery to the left and the duration of the ScrollTrigger are not the same)

 

 

 

 

If you want to have the 'native' behaviour for horizontal ScrollTriggers, you'd have to make your site scrollable horizontally instead. A different way to then make it scroll when scrolling vertically could be to 'map' the vertical scroll-events to the horizontal scroll of the page, as shown in this thread - but that would bring a whole lot to think about itself because you'd have to make sure it works for all scroll events (the example in that thread only shows it for the scroll wheel) and probably brings quite a few other caveats, too, that you would have to handle yourself. 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×