Klaas Posted December 26, 2023 Share Posted December 26, 2023 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 Link to comment Share on other sites More sharing options...
akapowl Posted December 27, 2023 Share Posted December 27, 2023 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. 3 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 27, 2023 Solution Share Posted December 27, 2023 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? 3 Link to comment Share on other sites More sharing options...
Klaas Posted December 27, 2023 Author Share Posted December 27, 2023 This is perfect. I've tried both the "sticky" workaround and the pinSpacer approach. Both work like a charm, thank you very much. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now