¿Como hace esta web para que una imagen Gif se active al hacer scroll?

Mi primer post, solicitando ayuda, una curiosidad esta pagina web donde al ir bajando vemos como se activa el gif animado, una sola vez, luego si subimos de nuevo se activa y asi con todas las imagenes gif del sitio. Son imagenes animadas gif que tienen una sola vuelta, no son infinitas. ¿Como aran esto? es un secript? algun plugin?, que bueno que queda una web asi, le da mas dinamismo. Si alguien me puede guiar para saber como hacer eso.

Este es el sitio: invisionapp(punto)com

Hola!

Hasta donde sé, no se puede controlar la animación de un gif. Una imagen gif tiene las animaciones incrustadas, por lo que tendrías que descomprimir la imagen, procesarla, decirle qué hacer y luego volver a convertirla para que el navegador la presente (puede que me equivoque).

Revisé el sitio y, extrañamente, no pude encontrar lo que hacen :confused:. No sé qué es lo que hacen para activar las imágenes (los gif no cambian en ningún momento).

Una forma de hacerlo sería intercambiar las imágenes con Javascript (usando jQuery), entre una imagen estática y otra animada:

jQuery(document).ready(function($) {
  $('img.animated').hover(
  function() {
    $(this).attr('src', 'imagen_animada.gif');
  },
  function() {
    $(this).attr('src', 'imagen_estatica.gif');
  });
});

Este código se ejecutaría para todas las etiquetas img que tengan una clase animated, no hará nada con el resto.