RDima

Good afternoon. I have the following situation. There is a website page where there are many different animations using GSAP (parallax effect, 3D transformations when mouseover at an object, etc.). Almost all animations are started using ScrollTrigger. In addition, there are a lot of graphics on the page (the pictures are optimized, but there are still a lot of them). As a result, the page takes a long time to load. At the moment, this is not a critical problem, but I noticed that due to the long loading of images and other elements, sometimes GSAP animations fail. In particular, animations either do not work, or the coordinates of the location are lost. On the advice from the forum, I solved the problem like this: I create all GSAP animations only after the page is fully loaded. The solution is working, but I would like to know if there are any other ways to optimize

Thanks for help!

If you open the console, the Network tab, you will see that the request for the id of the Youtube video with the status canceled, and the Initiator is ScrollTrigger. If you do not use Scroll Trigger in animation, then there is no such error

Yes, that's how the Youtube API works. In HTML, I create a div with the data-youtubeurl attribute. Then a new script tag with a link to the Youtube API is created in JS, then the YT.Player constructor is used, inserting an iFrame instead of a div

Good afternoon. I have the following problem. There is a block with a background video (Youtube, the necessary scripts are loaded using the Youtube API, then an iFrame block is inserted), it should have a parallax effect (when scrolling, the background from the video is fixed to a certain point, and the content moves up). To fix the background video, I use Scroll Trigger. And in this case, it blocks the download of the video (the video then loads, but a lot of errors appear in the console). If you disable Scroll Trigger, then everything works. Attached a link to codepen