Freehand Sam

Thanks. This led me in the right direction. Scrolling to after window load, and/or with delays didn't work. But because you mentioned it, I took another look at the docs on SmoothScroll's scrollTo method. And noticed you could set an offset in pixels. So that made me think maybe I could grab the height of the pinned element on my page and offset by negative that. So it ended up looking like this: smoother.scrollTo(elem, true, "top -" + offset) **elem is the anchor ID from the URL hash and offset is the height of my pinned div** This only works in my specific scenario where I know the page and the pinned element ID to account for. But it solves my problem. And I assume it could be made to work for any page with pinned elements if you used the same class every time and some conditional statements.

It's difficult to create a CodePen to demonstrate, since the issue is only when coming from another page. But it's the same issue as the OP on the reply I've linked. I have a site using ScrollSmoother as well as a few ScrollTrigger pinned elements (one that scrubs) at the top of the page. The sections I need to anchor to are below the pinned & scrubbing elements. I've implemented Blake's suggestion to the OP as well as a few others I've found. At best, it's somewhat erratic, landing in different places for the same anchor at different times. I'm thinking this is due to it trying to scroll before the page has fully built. I tried adding a delay to gsap.to(window, {scrollTo: anchor}), but it did not help. Any other ideas before I throw in the towel?

Thanks. I think this is above my head. If I have time I'll come back to it and play around with the above suggestion. I appreciate your guidance.

Thanks. Right, I assume I'm going to have to animate each slide separately instead of one long timeline that just animates the height of all three combined for starters. But I'm not even clear from there if it's possible to get a slide to stick and hold in place for a sec before animating in the next slide.

What I'm trying to achieve is the effect of the individual slides (.number-slides) scrolling up very quickly, then locking and holding for a second, then releasing to quickly scroll to the next. The client wants it to feel more like each slide is "clicking" into place, as opposed to the smooth scroll. Essentially like a vertical carousel slider, but it's controlled via scroll. And pinned while it runs through the 3 slides.

Okay, I now realize I was completely misunderstanding pinning and this cleared it up for me so well. And I'll do some reading to understand stagger now too. Thank you very much.

Funnily enough, the Codepen happens to be at the right height that you don't see the issue. You have to view it on Codepen or change it to 0.5x to see what I mean about the whitespace above and below the gallery section...

I'm struggling with a couple things on what I'm sure is a really simple (for someone else) scrolltrigger. I've read the documentation and reviewed examples, but I can't seem to wrap my head around what's creating my issue here. I want to explicitly set my gallery to be 420px tall. And so I'd like it to pin at center center, scroll up the three slides, then continue. But I can't seem to figure out how you keep the pinned area to just be 420px with no whitespace above and below. When I've used pinning before, it was always 100vh, and this wasn't an issue. I'm guessing it has to do with my "end:" parameter, but reducing that to "+=420" (height of one slide) just makes the scroll duration quicker. I like the speed of it, I just don't want any spacing above and below. Then secondly, I need to make the indicators have an active state, or just change background colors as each slide comes into view. I've not spent time on this yet, and my pen doesn't even address it. I wanted to figure out the major issue first. But any examples you could point me to, or advice on the logic to use, would be appreciated. Not sure if I should be thinking of it as "if the scroll travels 1/(number of slides) of the distance, change color" or more like "on enter", "on leave" foreach slide type of thing. Thanks as always for your great help.

FWIW, my issue turned out to be a big, complicated SVG US map graphic. It is pretty intense - all 50 of the US states with individual paths, plus state labels as paths plus I drop in about 350 location markers, all SVGs too. So as Jack mentioned in #4, the SVG was too much math to animate smoothly. Since I couldn't lose or change the map (it has to be an SVG to do what it needs to do), I decided to display:none it when it's not in view. So, we're a bit choppy in the map section, but smooth everywhere above and below it on the page. If you're doing something like this, make sure you have a container that holds the space (using aspect ratio for example) so there's no jump when display:none kicks in. I also ended up using ScrollTrigger.clearScrollMemory(); window.history.scrollRestoration = "manual"; because I realized my map wasn't initializing if I refreshed the page after I'd scrolled past it -- since its container didn't exist. Thanks again for the super helpful community here.

I really appreciate you taking the time. I'll do some one by one testing and try to report back on which made the biggest difference for others' future reference.

Just curious if anyone is aware of an article(s) or resource I can refer to for best practices to achieve the smoothest experience possible when combining multiple GSAP effects and ScrollSmoother. My first site has the GSAP kitchen sink and is surprisingly fairly smooth on Chrome considering how many effects are happening, but it's a bit jittery on Safari. So just looking for any tips/tricks to make it as good as it can be for all users. Things like adding "will-change: transform" to elements that will be transformed. I'm aware of this css-tricks article: https://css-tricks.com/tips-for-writing-animation-code-efficiently/ and think I've followed the principles pretty well. Anything else out there recommended reading on this subject? Thanks!

Yes, it is. I rebuilt it using that logic and it's much easier for me to understand now. For whatever reason, I did have to go back and add the bit about z-indexing from the original to keep my last photo from being on top - I'm sure that's related to some parent positioning or z-indexing I already had going on in my site's stylesheets. I also had to set PinSpacing: 'false' otherwise there was a huge space below (bc .text-wrap is 300vh I assume). Again, probably some difference in overflow in my site vs the Pen. But this definitely got me there. Thanks again, guys.

Thanks, @OSUblake. You were right. I forgot about scrolling and jut did the reveal animations for when each text panel was visible and it worked on my first shot. So that did it for the left side. Then in regard to my issue with ScrollSmooth, it was a simple as removing "scroller:" parameter from the triggers. Which, obviously, I should have figured out on my own, but am thankful for @akapowl's direction. All set. Thanks again for the great community here.

I know there are a million posts about this cuberto.com effect, but I can't find anyone that has combined the effect akapowl ultimately achieves here: https://codepen.io/akapowl/pen/bGpxpmJ/71b0d3b98ebd526c8abf2bb4b70ac702 but swapping out Scrollbar for the ScrollSmoother plugin. I had this basically working with no scrolling library prior to adding ScrollSmoother by wrapping the whole section in a .scroller div that had overflow-y:scroll and a set height of 300vh, since I have 3 section of 100vh each. But then adding ScrollSmoother broke that, understandably - since it's not going to scroll that internal div. So then I tried changing my "scroller" parameter in my ScrollTriggers to use the #smooth-content div, closer to what the Scrollbar demo does, but to no avail. Ultimately, I'd like it to scroll down to the gallery (#values) section, pin, and then reveal each of the three images on the right based on the scrub position. But then also slide up the text corresponding text as its section comes into view. I was going to tackle the text part once I got the images going, but any direction as to how to trigger those properly would be greatly appreciated too. I'll probably end up right back here asking anyway. I'm obviously new to this. I'm very grateful for the extremely helpful community here. I've only been playing with GSAP for a week now and it's starting to gel, but unfortunately my client is pushing me into the deep end right off the bat, so I'm humbly asking for assistance.

Solved. Thanks so much. That's what I get for copying/pasting code without reading each part and thinking it all through. I might have one more for you, but I'l create a separate Pen and topic for it if I can't solve it on my own.

Hi. I'm just starting to experiment with ScrollSmoother and found that is created an issue on a previously created horizontal scroll gallery I made with ScrollTrigger. If you look at the CodePen, you'll see it correctly scrolls to the gallery, pins it and starts to horizontally scroll the first strip of photos right to left, although it never makes it to the 4th photo. And then sort of stops moving anything... What's supposed to happen after scrolling all 4 photos is unpinning that first strip of photos, scroll down to the next strip, and do the horizontal scroll again, and so on. Then eventually release and continue vertical scrolling to the bottom of the page. If you comment out the ScrollSmoother.create(), you'll see how it is supposed to work. So I know my issue is introduced by ScrollSmoother, but I'm not sure where to go next to try to solve it. I tried making my scroll wrappers above the #portfolio section ONLY, but even still I had the issue. I'm new to GSAP in general, and sure I'm missing something. I just can't find the appropriate advice in the forum or docs. Any guidance is much appreciated.

Agh! Thanks so much. That indeed did the trick.

Hello. I'm just starting to play around with SmoothScroller and have run into an issue I can't seem to make sense of. Setting lag via a data attribute, as in data-lag=".05", creates a JS error and breaks all GSAP. See screenshot for console. Although data-speed works perfectly fine on the same div. In fact, I realized adding data-speed="1" will actually create data-lag="1" upon inspection of the code. But adding the data-lag attribute in my <div> myself breaks it. Obviously, your demos on CodePen work fine with the same basic setup. So I wondered if maybe there's a bug in the trial version available via NPM (https://www.npmjs.com/package/gsap-trial)? I've stripped away all my other GSAP code (I've got some scrolltriggers), gone to bare bones html and css, and nothing fixes the error. So I'm only left to think it's in the plugin. Is there any way to test that exact same version of SmoothScroller.js on the NPM trial in CodePen so I can be in a completely clean environment but use the exact same version of the plugin? I will become a member and get the real SmoothScroller as soon as I am sure it will all work as the client wants and they approve it I just want to make sure there's not something inherently wrong with my whole setup first.