Share Posted March 13 I'm may be missing an extra step. I'm using ScrollTrigger on a page with a Youtube embed. The inspector > network displays 100s of these requests that are taking up loading time (see attached). My codepen demonstrates this (though not as extreme). Am I missing a precaution mixing these things (ScrollTrigger + Youtube)? See the Pen oNPXKgZ by dan_default (@dan_default) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 13 That's because pinning requires that ScrollTrigger wrap your pinned element with a pin-spacer <div> and whenever there's a .refresh(), it must REMOVE all pin-spacers and implement things again top-to-bottom in order to ensure the proper flow of everything and CSS styles are maintained. If you've got an <iframe> in the pinned element, browsers reload that when the element is reparented. Solution: define your own pinSpacer element so that ScrollTrigger doesn't have to create its own and reparent anything: See the Pen JjaLjeO?editors=1010 by GreenSock (@GreenSock) on CodePen Does that help? 1 Link to comment Share on other sites More sharing options...
Solution Author Solution Share Posted March 13 Thank again Jack. In researching, I found a utility that also solved the problem while making my page more performant, eliminating the need for a Youtube iframe slowing down my page: https://github.com/paulirish/lite-youtube-embed 2 birds! 3 Link to comment Share on other sites More sharing options...
Share Posted March 13 Ah this is handy, thanks for popping back! 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