Scrollmagic: On-Screen / Off-Screen ?

[JonMcL]

So I have a situation where I would like to use ScrollMagic for starting and stopping video playback as video elements scroll on and off the viewport. As long as part of the video is visible, the video should be playing. Once the video if no longer visible, it should pause.

I have something working, but I'm wondering if I'm missing out on a simpler and more clever way of doing this. Here is an example of what I'm using:

        var bottomTrigger = new ScrollMagic.Scene({
            triggerElement: elem,
            triggerHook: 'onEnter',
            duration: 0,
            offset: 0
          }).on('enter leave', function(e) {
              if (e.target.controller().info("scrollDirection") != 'REVERSE') {
                $(this.triggerElement()).trigger('on_screen');
              } else {
                $(this.triggerElement()).trigger('off_screen');
              }
            }).addTo(controller);

        var topTrigger = new ScrollMagic.Scene({
            triggerElement: elem,
            triggerHook: 'onLeave',
            duration: 0,
            offset: $(elem).height()
          }).on('enter leave', function(e) {
              /** @var this ScrollMagic.Scene */
              if (e.target.controller().info("scrollDirection") == 'FORWARD') {
                $(this.triggerElement()).trigger('off_Screen');
              } else {
                $(this.triggerElement()).trigger('on_screen');
              }
            }).addTo(controller);

So am I doing this right or is there an example somewhere that shows another way?

Thanks you for making and open-sourcing this great resource!

..jon

[janpaepke]

Hi Jon,

this is a very interesting usecase and yes, there's a more "elegant" way to do this.
This is what duration callbacks were made for. :)
Check this out: http://jsfiddle.net/janpaepke/yk9w7a9b/

Basically you create one scene, that handles the start and stop of the video.
Then you set the scene's duration to a function that returns the appropriate value.

var videoArea;
// return cached value
function getVideoArea () {
    return videoArea;
}
// update value
function updateVideoArea () {
    videoArea = $(window).height() + $("#testobj").height();
}
// update on resize
$(window).on("resize", updateVideoArea);
// set initial value
updateVideoArea();

// create scene
var scene = new ScrollMagic.Scene({
        triggerElement: "#testobj",
        triggerHook: "onEnter",
        duration: getVideoArea // set function as duration value
    })
    .on("enter", function(e) {
        console.log("start video");
    })
    .on("leave", function(e) {
        console.log("stop video");
    })
    .addTo(ctrl);

Furthermore: If you don't care about the stopping of the video to be precise and just want to stop it at some point if it's out of view, you could also just set the duration to like 200% and save yourself some functions.

hope this helps. :)

regards,
J

[JonMcL]

Yes! Much cleaner. I didn't think of using a function for the duration.

Thank you!