beavykins

Thanks for the info, I have this hooked up using smooth scrollbar (on desktop), I assume that should mean it is instant? It does seem to be scrolling related, I have a resize observer hooked up to the scroll container which fires refresh when it detects a resize, that happens when things like lazy loaded images pop in. that works nicely for my scrollTriggers but I have something else that relies on the correct position of all the page elements so I am using the refresh event to redraw that, but it doesn’t seem to fire until a little while after I have stopped scrolling if I continually scroll to the bottom. It’s a bit of a complicated setup so I will try and debug it a bit more in case there is something else working against it. Thanks!

Is there any kind of enforced delay with the refresh event? I just added it and it seems to fire noticeably after everything has refreshed. I wonder if there is some kind of throttle or debounce going on? It may well be something else going on with my implementation though. Thanks again!

Wow, how did I miss that! Thanks for the speedy reply.

Is there a way to call a function once ScrollTrigger has finished calculating everything for all timelines on refresh? I couldn’t find anything about it and considered making a simple timeline and setting the refreshPriority to be the lowest, but this timeline wouldn’t be used for anything else so I thought there might be a better way I am missing? Thanks!

Thanks for looking at this and fixing it so quickly! Also thanks for the kind words, glad I could help.

Thanks!

I have an issue where when I pin an element and specify a spacer element the spacer isn’t given a height so it collapses as the element pins. If I don’t specify a spacer and let scrollTrigger create one it works as expected. Am I missing something? Thanks! https://codepen.io/beavykins/pen/rNpXxzR https://codepen.io/beavykins/pen/ZEvgQmN

Amazing, thanks very much, not sure how I missed that!

It looks like this is an issue with the Lottie player. https://github.com/LottieFiles/lottie-player/issues/152 I’m still curious about the number of times a custom element is reconnected when scrollTrigger adds pinning if anybody has anymore info about that. Thanks!

I have managed to make a basic demo. https://codepen.io/beavykins/pen/qBpGZqo I did this on my phone so hard to test but it looks like after scrollTrigger is run the Lottie player doesn’t actually re-initialise at all, my real working version is slightly different as I have the Lottie-player loaded from another custom element that adds it in again on connectedCallback.

I’m on my phone at the moment so a full demo is difficult but I have created a simple custom element that gets pinned, you can see that the custom element fires the connectedCallback six times, is that normal? I know that a pin-spacer is added which will force the element to disconnect/reconnect but I would of expected this to only happen once until it refreshed again? https://codepen.io/beavykins/pen/gOoJPVQ

Thanks again for your response. Yes web components, It uses a lottie-player element. I will see if I can get a demo setup tonight, I have a feeling it isn’t something that can be fixed just with scrollTrigger alone.

I can try and make one later, essentially .refresh() forces custom elements to reconnect to the DOM which means they re-render and the Lottie file hasn’t loaded everything in time to allow scrollTrigger to get its correct dimensions. Even if you test and set a long delay before forcing a refresh it does the same because the custom element reconnects each time. It seems like I have to set the aspect ratio on the parent element once it has loaded and then force a refresh after that initial load but I have to check if it has been done once otherwise it creates an endless loop.

Thanks for the reply. The issue is to do with the pinning as it needs to know the correct height of the element in order to add the pin spacer, however when scrollTrigger.refresh() happens it forces a redraw of the element when it wraps it in the spacer container, this then forces the Lottie custom element to reconnect which means it has a 0 height because it hasn’t had a chance to render again. i have found a work around to a degree, when the Lottie file has loaded I can get its dimensions and add an aspect-ratio style to a parent element which I can then be seen when I do a .refresh(), but sadly I can’t call the refresh when the Lottie loads because that will trigger an infinite loop of refreshing and loading. I was hoping there was a simple method I could use to only update the pin positions without k having to force a complete refresh but it doesn’t look like there is one.

I have an issue where when I try and pin an element that contains a Lottie file it never calculates it’s height properly. I think the issue is that the Lottie file uses a custom element that creates the markup that dictates its height when it is connected to the document, however when pinning the element is connected multiple times while it gets wrapped in the pin-spacer div and it doesn’t render until after scrollTrigger has done it’s calculations. I have tried using ScrollTrigger.refresh() but that seems to cause the Lottie file to reconnect so has the same issue. Is there a way to delay scrollTrigger from calculating until after the Lottie file has run or a way to refresh scrollTrigger without causing the custom element to reconnect? Many thanks!