search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.92k stars 2.17k forks source link

Keep a scene with background video pinned until after video has finished playing #315

Closed tokyobarbs closed 9 years ago

tokyobarbs commented 9 years ago

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

janpaepke commented 9 years ago

Hi Craig, what it sounds like you want to do is effectively disabling scrolling, until an event occurs (video finished playing). Now personally I would recommend against that, as I think it's bad UX (the user should be able to decide wether he wants to contine scrolling and skip the video or not). But if you really want to do this, check this out: http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

Again, I would advise against it, so make sure this is really what you want to do. :) Remember: You could also Pin the video for a little while longer (as you described above) and pause it, once the user leaves the scene and resume it, once he re-enters.

janpaepke commented 9 years ago

hey craig, did this solve your issue?

janpaepke commented 9 years ago

closed due to inactivity