Jump to content
Search Community

Embedded youtube video and ScrollTrigger on page - 100s of requests slowing page

braunsock test
Moderator Tag

Go to solution Solved by braunsock,

Recommended Posts

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)?

Screenshot 2023-03-13 at 11.24.21 AM.png

See the Pen oNPXKgZ by dan_default (@dan_default) on CodePen

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...