Milenoi Posted August 11, 2021 Share Posted August 11, 2021 Hi guys, I tried to lazyload a video mit scrollTrigger, using data-src Attribute. I wonder why this ist not working? When section2 top enters bottom of window src of the video is set. But the video does not appear it is invisible. What am i doing wrong? Thank you! Update: Added video.load(); See the Pen eYWxRYY by milenoi-the-sans (@milenoi-the-sans) on CodePen Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted August 11, 2021 Solution Share Posted August 11, 2021 I believe you'll need to add a video.load in your onEnter; it's not like loading images. You could just set the preload attribute to 'none' preload="none" and then just run video.load, instead of adding the src. 4 Link to comment Share on other sites More sharing options...
Milenoi Posted August 11, 2021 Author Share Posted August 11, 2021 Dear @elegantseagulls, you're totally right. I missed the load event- shame on me! Thank you!! now it works fine 1 Link to comment Share on other sites More sharing options...
andrewandopen Posted January 16, 2023 Share Posted January 16, 2023 @elegantseagulls @Milenoi Would you have an active codepen demonstrating how you achieve this? I'm trying to load my videos when they come into view using scrolltrigger but having difficulty. Thanks in advance Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 16, 2023 Share Posted January 16, 2023 @andrewandopen Do you have a CodePen Example? Link to comment Share on other sites More sharing options...
andrewandopen Posted January 16, 2023 Share Posted January 16, 2023 @elegantseagulls I don't, I've been working trying to get something to work locally, but I'm struggling to get started with it. I know how to animate an element when it comes into view using scroll trigger, but can't seem to figure out how to load a video when it comes into view (as opposed to on initial page load) Thanks. Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 16, 2023 Share Posted January 16, 2023 @andrewandopen You'll want to use video.load() on the onEnter and onEnterBack (or onToggle) callbacks in ScrollTrigger docs here: https://greensock.com/docs/v3/Plugins/ScrollTrigger or you could use .isInViewport() docs here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() 1 Link to comment Share on other sites More sharing options...
andrewandopen Posted January 25, 2023 Share Posted January 25, 2023 Thanks @elegantseagulls, but what can I use to prevent the videos loading initially on page load? Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 25, 2023 Share Posted January 25, 2023 On 8/11/2021 at 9:53 AM, elegantseagulls said: You could just set the preload attribute to 'none' preload="none" @andrewandopen 1 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