Pinned element using ScrollTrigger breaking the flow on Lit.dev app. Error: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

[kosmikgirl]

Hello community!

 

We are building an app with lit.dev and we are using gsap and scrollTrigger for some animations needed. 

 

I created this simple codesandbox, with some code I've found out there, to emulate what we need to do, and also to think out of the box and see if the problem is the complexity of our app, or, the integration with lit.dev. 

 

https://codesandbox.io/s/scrolltriggerlit-w9rske?file=/src/my-component.ts:817-837

 

According to the codesandbox and the error showed, is definitely a lit problem. 

If you uncomment pin: true in line 27 you will see the error Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

 

As you can imagine, there is not a lot of documentation about lit and gsap/scrolltrigger out there. Maybe you can help! 

I've tried with refs and querys, also trying to access to the shadowRoot (that is equivalent to the query decorator)

 

Any suggestion will help! 

Thanks!

[Cassie]

Hello there!

I've just poked around a little - Lit looks really interesting.

So scrollTrigger adds elements to the DOM when it pins and it looks like lit doesn't like that. I can't find anything in the docs about it unfortunately so it's not a hugely satisfying solution.

Either way - I've added a containing element around the pinned div and it seems to be working ok now. 👀

 

https://codesandbox.io/s/scrolltriggerlittesting-forked-i3t6p9?file=/src/my-component.ts

[GreenSock]

It looks like the parentNode of the pin element is not resolving to a valid Element. ScrollTrigger is trying to figure out if it should add pinSpacing because you didn't define a value, and that's where it's getting hung up. Try just explicitly setting a pinSpacing option (probably true) so that ScrollTrigger doesn't have to guess (it sets it to false if the parent has display: flex because pinSpacing won't really work in that scenario anyway due to how the browser handles flex). 

 

I'll add some code to the next release to sense this condition and skip when the parentNode isn't a valid element.