0

Firstly, great library! Really enjoying using ScrollMagic. Fantastic!

Secondly, I hope the subject for this question is clear enough...

What I am trying to achieve:

I have a scene - at viewports full width and height - that has a pin, duration and tween Timeline set on it. The tweening is working as it should, no problems there.

I also have an HTML5 video laying in the background. This is injected into the scenes container upon entering the scene (with autoplay off). What I want to do, is after all my tweens have finished, the video in the background (fullsize of scene) to play and with the scene still pinned until it is finished.

Problem is, is that when the tweens have finished, and while the video is playing, the scene effectively finishes, and thus the pin is removed and my next scene is scrolled to.

What is the best way to keep the scene pinned there until my video has finished playback? Are there any examples of what i am trying to achieve here?

One of the directions I've tried to take is to add another null tween with a delay of so many seconds while the video is playing. It gives some pinning, but if the user keeps scrolling, and fast during playback, they will scroll to the next scene with the video not quite finished yet...

If anyone has any initial thoughts, that would be great. I've been going back and forth trying to think of a way, but can't find an elegant solution.

Thanks in advance, Craig

BarberCraig
  • 157
  • 1
  • 9

1 Answers1

0

HTML 5 video has an onended event that you can trigger when the video is done playing. 

// Disable scrolling
vodObject.play();

vidObject.onended=function(){
    // Re-enable scrolling
};

Maybe you could disable mouse scroll when the video starts playing, and then re-enable it when the video reaches onended by using the method provided in this answer: How to disable scrolling temporarily?

Community
  • 1
  • 1
Marquizzo
  • 17,230
  • 9
  • 36
  • 59