Horizontal scroll inside horizontal scroll

[Diegoo]

Hi I'm new to gsap and ScrollTrigger and I'm currently trying to do a fully horizontal website using ScrollTrigger. But I would like to be able to scroll horizontally inside a panel without triggering the global horizontal scroll and so changing panel. I tried to make a minimal demo so for example, I made a looping moving text in the orange panel but ideally I would like to be able to make the text move by scrolling

Basically, I want to scroll normally to the orange panel, once I'm in it, when I scroll only the text is moving and when the text is done scrolling, if I continue to scroll I end up in the purple panel. I don't know if what I am asking is even possible (I've been looking for days for a solution) but if it is, it would be amazing if someone could point me in the right direction

 

Fyi, I already tried to make the orange panel with more width to simply scroll through it but I found out it made other parts of my project more difficult (like snapping to the next panel) so I don't think it's a good solution
 

See the Pen qBgjwLG by diaiggaux (@diaiggaux) on CodePen

[Rodrigo]

Hi @Diegoo and welcome to the GSAP forums!

 

I think the best approach here is to create a single timeline and create a pause in the horizontal motion of the panels in order to move the text inside the orange panel as you keep scrolling up/down, the whole horizontal nested scroll could be very confusing for users TBH.

 

Maybe the resources in this thread can provide a good starting point:

 

Hopefully this helps.

Happy Tweening!

[Diegoo]

Hey @Rodrigo thanks a lot for your answer. That's pretty much what I imagined but I hoped there was another solution because another goal for the website is to make the scroll an infinite loop. I've seen the helper function provided and I managed to use it correctly in other attempts. But by doing a single timeline like you suggested I feel like making it looping might be difficult and tricky. Do you think it's possible to do this ?

[Rodrigo]

Hi,

 

Indeed you can use the Horizontal Endless Loop helper function with ScrollTrigger, the helper function actually returns a GSAP Timeline instance that can be added to a ScrollTrigger instance. The issue, as you already suspect, is the animation in-between. For what I can gather based on your posts, creating a somehow complex site (sounds like a very fun one though) is not the simplest task to achieve and in fact creating a single timeline would indeed be quite an undertaking. Unfortunately, right of the top of my head I can't think of other approaches. I'm 100% sure that there are other ways, but they would require some experimenting and testing in order to see if they are a good fit.

 

Another option could be using ScrollTrigger's Container Animation in order to see if that can help:

https://gsap.com/blog/3-8/#containeranimation

 

Unfortunately we don't have the time resources to provide fully working custom demos or create complex solutions for our users in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forum in order to get help there.

 

If at some point you get stuck and have a GSAP question, feel free to come back to this thread or post a new one and we'll be happy to help you with any GSAP related problems you could have.

 

Happy Tweening!

[Diegoo]

Thanks again for your help, I know what I'm trying to do is complicated and I wasn't expecting you or someone else to do everything for me. I'm already really glad that you are answering that fast
I guess I'm going to keep trying until I find something or abandon the endless loop and settle with the single timeline which will be easier for everything else

[Diegoo]

Hey, I'm back with new problems
As you suggested, I tried to make a single timeline to handle well all the animations but I had an issue when trying to add a new feature. Basically, I'm trying to add a sort of custom snap so that the current panel will slide out of the screen when the user has already scrolled like 20% of the screen.

So, I tried adding a regular animation (not linked with the scrolltrigger from the timeline) inside my timeline but while the animation is playing it seems that the scroll continues and is causing issues. I would like the scroll to be disabled during the animation
Try scrolling really fast on this CodePen and you will see by yourself

See the Pen OJdxVVX by diaiggaux (@diaiggaux) on CodePen

I tried disabling the ScrollTrigger before the animation and enabling it back after but it doesn't work and I have no idea why this is happening or how to solve this
I have other ideas to do what I want but I'm not sure they are good options, I thought about implementing a sort of custom snapping with the snap from scrolltrigger and I also thought about making a timeline by panel and starting another timeline after another one ends.

I would really appreciate if someone could help me a bit and point me in the right direction (if there is one)

[Rodrigo]

Hi,

 

Yeah this seems more like Alice in Wonderland, the deeper you go into the rabbit's hole, the weirder it gets.

 

As I mentioned what you're trying to achieve is not simple. On top of that enable and disable ScrollTrigger instances can lead to really weird behaviours and unexpected results, so I'd recommend to avoid that at all costs, unless you have no other choice.

 

Maybe you could try combining ScrollTrigger with the Observer Plugin, like this demo:

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

 

Another option is to just use Observer and forget about the scrolling at all:

https://gsap.com/docs/v3/Plugins/Observer/

 

As you can see in this demo, with Observer you can create an infinite loop without all the hassle of the scroll position and complex custom configurations and setups in ScrollTrigger:

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

 

Hopefully this helps.

Happy Tweening!

[Diegoo]

Hi, thanks again for your help @Rodrigo I'll look into both the options and hopefully I'll managed to get what I want

[Diegoo]

Hey, quick update just in case anyone is struggling to do something similar but I managed to achieve what I wanted by building a perfect looping animation timeline and using the Observer plugin to navigate through it by scrolling, similar to the last codepen linked by Rodrigo. I also looked at this codepen and it helped me a lot : 

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

Once again thanks a lot @Rodrigo !!

[Rodrigo]

You're more than welcome!

 

Is great to hear that you were able to create what you were looking for and the GSAP was useful in that quest 💚

 

Happy Tweening!