jquery - Keep a scene with background video pinned until after video has finished playing -


firstly, great library! enjoying using scrollmagic. fantastic!

secondly, hope subject question clear enough...

what trying achieve:

i have scene - @ viewports full width , height - has pin, duration , tween timeline set on it. tweening working should, no problems there.

i have html5 video laying in background. injected scenes container upon entering scene (with autoplay off). want do, after tweens have finished, video in background (fullsize of scene) play , scene still pinned until finished.

problem is, when tweens have finished, , while video playing, scene finishes, , pin removed , next scene scrolled to.

what best way keep scene pinned there until video has finished playback? there examples of trying achieve here?

one of directions i've tried take add null tween delay of many seconds while video playing. gives pinning, if user keeps scrolling, , fast during playback, scroll next scene video not quite finished yet...

if has initial thoughts, great. i've been going , forth trying think of way, can't find elegant solution.

thanks in advance, craig

html 5 video has onended event can trigger when video done playing.

// disable scrolling vodobject.play();  vidobject.onended=function(){     // re-enable scrolling }; 

maybe disable mouse scroll when video starts playing, , re-enable when video reaches onended using method provided in answer: how disable scrolling temporarily?


Comments