Scrolltigger pin reloads Sketchfab model

[Klaas]

Hi, I am trying to work with a Sketchfab model, a Scrolltrigger and pinning. My goal is that while the 3D model is pinned, the camera is animated when scrolling. I've got all the parts built, but now I'm running into an issue with pinning. In short: when I pin the div that contains the 3D model, the 3d model is reloaded and I lose the connection to the 3D model API.

In the example codepen you can see this happening. The model starts loading twice. The probable cause is that I create the Scrolltrigger with pin after the Sketchfab model has initially loaded. The reason I do this, is that I need to add information from the 3D model in the timeline of the Scrolltrigger. If you remove the pin, the model loads once, as expected.

 

I believe the issue boils down to: I need the 3D model to be ready before creating the Scrolltrigger, but the pin in the Scrolltrigger will refresh the 3D model.

 

My question: is there a way to avoid this reload while keeping the Scrolltrigger with pin inside the viewerready event. Or can I add a timeline and onUpdate event to a Scrolltrigger after it has been created?

See the Pen 2eaaa859172bfc8e8d21e8c4ad699970 by klaasnienhuis (@klaasnienhuis) on CodePen

[akapowl]

Hello there.

Since the reloads also happen on resize, I think this boils down more to the browser forcing iFrames to reload when they are moved around in the DOM - which they will be, when being pinned with ScrollTrigger, since ScrollTrigger adds a wrapping pin-spacer element and moves the contents to be pinned into that element.

Have a look at this older thread for a more thorough explanation and suggestions to work around that - your best bet will probably be not to use pinning with ScrollTrigger but CSS with position: sticky instead if possible.
 

 

[GreenSock]

Actually, you can just define your own pinSpacer element so that ScrollTrigger doesn't need to create one for you and add/remove it from the DOM during refresh: 

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

 

Does that clear things up? 

[Klaas]

This is perfect. I've tried both the "sticky" workaround and the pinSpacer approach. Both work like a charm, thank you very much.