Gsap Horizontal scroll with vertically overflowed item

[Wmin]

Hello,

I'm building a scrolling animated site and got stuck somewhere, had to post on the forum as a last resort.
I have a site like the image below and when I scroll from the first screen to the second screen, I want the portfolio to scroll from top to bottom. I went through many examples but couldn't do what I wanted. Thank you for your help in advance.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Wmin]

Hi again,

 

I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me?

 

[Rodrigo]

Hi,

 

Unfortunately Locomotive is not a GSAP tool and we don't really have the time resources to give support for it. On top of that my knowledge of locomotive is very limited so I don't know exactly how your example is working and how to achieve what you're asking for.

 

Maybe these examples could provide some inspiration:

See the Pen GREjqrp by raj-shukla (@raj-shukla) on CodePen

 

See the Pen wvJroYy by akapowl (@akapowl) on CodePen

 

Hopefully this helps.

Happy Tweening!

[akapowl]

 

5 hours ago, Wmin said:

I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me?

 

To be correct, that is actually a fork of a demo of mine; this one right here.

 

See the Pen Vwppzqb by akapowl (@akapowl) on CodePen

 

 

Just like in fake-horizontal-scrolling scenarios, you won't be able to just pin anything because you are not actually scrolling this part of the page;

and I'm afraid I don't have the time to dig into your alternative approach.

 

What you can do instead though, is set up another ScrollTrigger that scrubs a y-tween on the heading - e.g. use the same values for the tween and ScrollTrigger's start & end, as the fake-horizontal-scrolling part uses, to make it pin/wander over that exact distance with the fake-horizontal scroll.

If you want it to behave different, that is going to become quite a bit more complex and it will be up to you to properly calculate the values that you'll need for it to behave like you intend. This should help at least give you an idea for how to approach it though.

 

Good luck and happy scrolling.

 

See the Pen JjeqZev by akapowl (@akapowl) on CodePen

[Wmin]

I definitely solved it thanks to your example, sorry for not stating that. The example you gave below is exactly what I was looking for, thank you very much.

12 hours ago, Wmin said:

Hi again,

 

I solved that problem but now i want to make "Fake-Vertical Scroll Section" title sticky but not working. can you help me?