NickPish

Hi, I'm looking for a developer experienced w/ GSAP and ScrollTrigger to offer some consulting on a project I've built and hopefully help address some minor issues I'm experiencing. This would be a quick consulting role, maybe an hour or two (?), so if you're interested please message me and let me know your hourly rate. Thanks!

Thanks so much, Jack- I realize you can't dole out limitless support here, so I very much appreciate the feedback. I will look into everything you've noted. I'm assuming for that function-based value you mentioned in one of the tweens, you're referring to the following portion? .to(hscroll2, { x: () => -(hscroll2.scrollWidth - document.documentElement.clientWidth) + "px" } I will look into that invalidateOnRefresh property.

Thanks again, Jack- so, I've updated my CodePen using your structure and I'm wondering if you could take a look. I'm getting closer, but it's not working quite right. I essentially just want the circle to expand and lead-in text appear in a non-scrubbed fashion, and then the rest to be controlled by scrubbing. There seem to be two issues w/ my current setup: first, if you scroll very quickly the elements will overlap and, secondly, on scrolling through the entire animation, back up and down again, I'd need the non-scrubbed elements to re-animate rather than persist (the two text elements also sometimes overlap when scrolling back and forth) - is this feasible? Thanks for your help! https://codepen.io/nickpish/pen/PoRwEeJ

Thank you for the reply, Jack! That's interesting re the callback approach- so would this take the form of a separate function that plays out the non-scrubbed portion of the timeline? That could be useful as I plan to have several panels like this one on a given page, so that might modularize things a bit.

Hi, in my current project I'm using ScrollTrigger to create sliding panels that include elements that animate automatically in a timeline when they enter the viewport, as well as those that are controlled by scrubbing. If you take a look at my demo CodePen, you'll see that I've created two separate ScrollTrigger instances w/ corresponding timelines to handle these different animations: the first simply plays out a succession of elements in a (non-scrubbed) timeline, and the second allows the user to reveal another text element, an overlay and finally a slide-out blockquote controlled by scrolling (i.e. via scrubbing.) While what I've set up works, it feels overly complex/verbose (i.e. w/ separate timelines and ScrollTriggers) and I'm wondering if there's a way to combine these behaviors in a more efficient way, say, in the form of a single timeline or some other method? Essentially, I just want to have certain elements animate automatically upon entering the viewport (such as the growing SVG circle and lead-in header), and others that require scrolling to progress, such as the additional text block and slide-out blockquote. I'm relatively new to GSAP/ScrollTrigger, so would appreciate any suggestions on how to make this code more efficient- thank you!

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.

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

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.

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!