ScrollTrigger horizontal scrolling - Pause on last element?

[NickPish 1 Likes (Newbie)]

Hi- first off, I want to send a huge thank you to all the admins and contributors on this forum, as the material is endlessly valuable! As for my question: I've adapted an implementation of horizontal scrolling w/ ScrollTrigger from Jack's response in this very helpful thread, and I've set up my own CodePen here. I would like to modify the scroll behavior such that there is a slight pause on the last element in the horizontal scrolling panel before moving on to the section below. In my project, I have text appearing in the horizontally scrolling panels, and in the current configuration the page continues to scroll immediately after the last element (red) slides out, making it difficult to read the text in that panel before one has started scrolling to the next section. I've tried adding a delay, changing the end value of the ScrollTrigger, but nothing has worked. Thank you for any insight here, and please let me know if what I'm after isn't clear!

See the Pen PoErgmj by nickpish (@nickpish) on CodePen

[OSUblake 18,475 Likes (Superhero)]

Welcome to the forums @NickPish

 

You can convert that into a timeline, and then add empty space on the end of the timeline like so. Just adjust the position parameter to get the spacing you need.

 

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

 

[NickPish 1 Likes (Newbie)]

Fantastic- thanks so much @OSUblake! One other question, if it's not too much trouble- I have multiple horizontal scroll sections on the same page that behave in the same way, i.e. varying width panels scrolling horizontally, and I'm wondering how I would go about setting up a foreach loop to target all relevant containers, say, with a class of .hscroll? I tried using let hscroll = document.querySelectorAll('.hscroll'); and then hscroll.forEach( (container) => { } ); w/ the ScrollTrigger function, but it doesn't seem to be working (?) Thanks again.

[Cassie 5,128 Likes (Superhero)]

That should work!

 

See the Pen bGaXbjP?editors=0110 by GreenSock (@GreenSock) on CodePen

[NickPish 1 Likes (Newbie)]

Ah! Thanks so much @Cassie! I don't think I was using gsap.utils.toArray() - this is perfect!

[Cassie 5,128 Likes (Superhero)]

It would also work with document.querySelectorAll()

 

Just fyi - I've just got used to using the GSAP util 🙃

[NickPish 1 Likes (Newbie)]

Thanks, @Cassie - I've come to realize after some research that my forEach loop is causing issues because I have other triggers in my page (some not of the "horizontal scroll" variety) and thus conflict with the order as described in @OSUblake's solution in this thread. So, I think I need to reorganize my code to handle the different conditions. In my project (a storytelling-type landing page), I have 10 different scrolltrigger sections, each of which belong to one of two general animation styles, i.e. (1) horizontally scrolling panels as described in the original post, and (2) another with panel elements that layer over one another as one scrolls. Given that the order alternates, I just want to confirm that the best way to handle the behavior is using a "master" forEach loop that checks for the panel type and creates the appropriate scrolltrigger, assuming I use a consistent pattern of classes for elements throughout? In my case, following @OSUblake's model, it would be something like this, I assume?

 

gsap.utils.toArray("#trigger-container").forEach(element => {
    if (element.classList.contains("hscroll")) {
       // horizontal scrolling trigger/timeline behavior here
       let tl = gsap.timeline({
          scrollTrigger: {
             trigger: element,
             pin: true,
             scrub: 1,
             end: () => "+=" + element.offsetWidth
          }
       })
       tl.to(element, {
          x: () => -(element.scrollWidth - document.documentElement.clientWidth) + "px",
          ease: "none",
       })
       tl.set({}, {}, "+=0.25")
    } else if (element.classList.contains("layers")) {
       // layered elements trigger/timeline bahavior here
    }
 })

I realize this should probably be in its own thread at this point, but still generally applies to the original question. Thanks for the guidance here as I try to organize my code in the most efficient/effective manner possible.

 

[OSUblake 18,475 Likes (Superhero)]

On 4/29/2022 at 6:28 PM, NickPish said:

I just want to confirm that the best way to handle the behavior is using a "master" forEach loop that checks for the panel type and creates the appropriate scrolltrigger, assuming I use a consistent pattern of classes for elements throughout? In my case, following @OSUblake's model, it would be something like this, I assume?

 

Yeah, that should be fine. There is no best solution as that is kind of subjective.