GSAP Horizontal Scroll Triggered by onClick, SetTimeout & Normal Scrolling

[cbellasworld]

I have six sections. Three sections contain buttons. I want to switch between using the scrollbar to advance to the next section in sections 1-3, using an onClick event to advance to sections four and six, and using a setTimeout to advance to section five. Sections 4 - 6 must also be hidden until triggered by the onClick or setTimeout. I can easily show/hide elements and trigger scroll in native .js, but have been struggling (for several days) to do this with GSAP. I'm sure that a lot of GSAP newbies will find this helpful. Thanks!

 

See the Pen gOjwLMp by Art-Lee (@Art-Lee) on CodePen

[GreenSock]

Welcome to the forums, @cbellasworld. 

 

Are you saying you want to literally prevent the user from being able to scroll past section 3 until they click that "Click to proceed" link? So users would see a big scrollbar there, but it would be impossible for them to drag it all the way to the right? Gosh, I would hate that as a user. 

 

Maybe you could set things up with position: absolute so that your first 3 sections are in a scrollable <div> and then your other sections are just sitting in front of that, but just off-screen, so the initial scrollbar would only go so far as the 3rd section and then you animate the others in with GSAP based on the user behavior (click, setTimout(), whatever). So DON'T have them all inside one big scrollable <div> that'd make it confusing/frustrating for users not to be able to get to all the parts or even see that they exist until the proper time. Just an idea.

 

Does that help? 

[cbellasworld]

The 'Click to Proceed' button is a part of a disclaimer that the user must read and acknowledge in order to continue to the site. In context, especially considering that the other sections of the site are also modular, it makes sense. 

I'm not sure that I can execute what you're suggesting in GSAP but thanks for your suggestion. 

. 

[GreenSock]

15 hours ago, cbellasworld said:

I'm not sure that I can execute what you're suggesting in GSAP but thanks for your suggestion. 

Maybe give it a shot in the most simplified form possible and then if you get stuck, post your minimal demo here and we'll do our best to help with any GSAP-related questions. We've got your back when it comes to the GSAP stuff. 👍

[cbellasworld]

Jack, I've already posted my work. Please reply with an example as is done with all the other questions posted to this forum. Thank you. 

[GreenSock]

I already gave you a suggested approach. Are you asking me to build that for you? Sorry, perhaps I misunderstood.

 

We're happy to answer GSAP-specific questions, but we unfortunately we just don't have the bandwidth to provide free general consulting services or do custom builds based on a list of requirements. Sometimes we go above and beyond and pitch in extra help when we see someone really trying to do the work themselves, but we have to be careful not to create expectations like that around here. We spend hundreds of hours every month trying to help people in these free forums. Club GreenSock members make all of this possible through their support. We provide these forums as a courtesy. If you'd like to explore paid consulting options, feel free to get in contact with us about that. We definitely want to help our users accomplish what they want.

[cbellasworld]

I have not asked you to do any work for me. I've been trying to figure this out for days, which is why I posted my help question to the GSAP help forum. How is this a request for consultancy services? This is an incorrect assumption that you formed when you first read my post and your non-answer answer proves it. You don't assign me homework, dad. I created an example in Codepen but it requires a subscription to show GSAP. You asked me to do "minimal work" as if I haven't already worked on this for days and GSAP for weeks. I should have posted under a male pseudonym. Whenever I post to these forums using a female name I always get men like you being condescending and unhelpful. An answer to this question would have helped a lot of people. Can we stop the back and forth now, it's a waste of time? 

[cbellasworld]

Don't worry, I'll delete the question. 

[GreenSock]

I had absolutely no clue if you're male/female - that makes no difference to me whatsoever. It never even crossed my mind to consider that.

 

If my answer came off as condescending, I apologize, as that certainly is not the vibe I try to convey around here. It was purely about communicating the scope of help you can expect in these forums. It's not because we don't want to help - we just get worn down trying to help so many people every day with all kinds of requests, many of which have absolutely nothing to do with GSAP. For example, the main issue with your setup is just markup/CSS. Almost none of it is really GSAP-related. 

 

As a courtesy, I went ahead and forked your demo and quickly mocked up what I meant: 

See the Pen wvxzZgO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It took me about a half hour. I hope that helps. And again, I apologize if I somehow offended you. We really are passionate about helping people around here; we just have to set boundaries due to our bandwidth and budgetary limitations (these forums are very expensive to run).

 

Anyway, I sure hope this gets you going in the right direction and I'm sorry to hear you burned days trying to get to this point. That must have been very frustrating! But trust me, once you grasp the basics of GSAP, you'll feel very empowered to do a lot of fun things. Good luck with your learning adventure. We're here if you get stuck with any GSAP-specific questions. 👍

[cbellasworld]

This solution - forking the animation - is not exactly what I envisioned, but it can work, thank you. I had a busy morning today but will also experiment with using kill() to end the animation.