Jump to content
Search Community

ScrollTrigger horizontal scrolling - Pause on last element?

NickPish test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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. 

 

  • 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.
×
×
  • Create New...