ScrollTrigger with Lottie and pinning

[beavykins]

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!

[OSUblake]

Hi beavykins,

 

It's hard to advise without seeing a minimal demo, but there is helper function for using Lottie with ScrollTrigger.

 

https://greensock.com/docs/v3/HelperFunctions#lottie

 

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

 

 

[beavykins]

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.

 

 

[OSUblake]

I'm not sure I understand the issue. Can you make a minimal demo that shows the problem?

[beavykins]

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.

[OSUblake]

What do you mean by a custom element, like a web component? 

 

I can't recall anyone ever bring up an issue like this before, so it's really hard to offer any advice without see issue in context. The key to getting question answered on this forum in a timely and accurate way is to provide a minimal demo. The smaller and more focused the demo, the better. 

[beavykins]

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.

[beavykins]

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?

 

See the Pen gOoJPVQ by beavykins (@beavykins) on CodePen

 

 

[beavykins]

I have managed to make a basic demo.

 

See the Pen qBpGZqo by beavykins (@beavykins) on CodePen

 

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.

[beavykins]

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!

[OSUblake]

A web component connection is going to be similar to an iframe, so you should use the pinSpacer property. It looks like you were on to the right idea, but it's not a boolean.

 

Quote

Element - normally ScrollTrigger creates a <div> internally to wrap around pinned elements but in the extremely rare scenario where you're loading an iframe into the pinned element, it can cause the iframe to refresh when ScrollTrigger refreshes (like on window resize), so this feature allows you to specify an element that should be used as the spacer instead of the internally-created one. That way, ScrollTrigger won't remove/add it during its refresh, keeping iframe content intact.

 

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

 

[beavykins]

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