Can I capture RM LOAD or VISIBLE events?

Custom code
1

I am creating a pretty elaborate page with RM and need to include some custom JS to have some counting numbers animate when they are visible on the page.

I’ve looked around a bunch, but cannot find any way to latch on to the RM events that must be firing when a Widget loads or is visible on the page.

Has anyone had experience with this?

I created a standalone scene to help demonstrate what I am trying to do: ‘Animating Counters & Lines’ by Internet Director

Thanks in advance.

  • Quentin
2

. @HEADLESS.HORSE do you have any experience with this? Any help would be super appreciated.

3

ok, this can be a bit tricky…

you can build up a function to detect if a element is in viewport like that:

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

After that you have to call this function on scroll an do what ever is needed.

$(window).on('scroll', function() {
if ($(".element").isInViewport()) {
//dosomething
} 
else {
//do nothing
}
});
});

With this you could play and pause an html5video or trigger the play/pause status of a lottiefile (as you mentioned to animate a number counting up), or manually trigger an RM-click animation.

Hope this helps…

4

.@neueMeta Thank you! I’m giving this a go and will update here with the results and any other questions. Much appreciated.