Estoy tratando de animar una ruta de forma incremental en el desplazamiento. Estoy siguiendo las técnicas descritas aquí y aquí . Tengo mis áreas de animación divididas en segmentos y estoy usando puntos de referencia para activar cada segmento. una vez activado (cuando la parte superior del segmento llega a la parte superior de la ventana gráfica), el segmento escucha el evento de desplazamiento y luego calcula el porcentaje de línea para animar en función de este fragmento:

 var scrollPercentage = rect.top / rect.height;

Esto parece funcionar bien, codepen está aquí . sin embargo, necesito que esta animación comience antes de que el segmento llegue a la parte superior de la ventana gráfica, digamos cuando esté a 100 px de la parte superior. También necesito una forma de calcular el porcentaje cuando rect.top está entre 0 y 100. Por alguna razón, cuando agrego una declaración condicional, a. no dispara o b. dibuja el camino hacia atrás:

 if (rect.top > 0 && rect.top < 100) { //unsure what how to calulate and trigger before //top of viewport //var scrollPercentage = ?; } else if (rect.top < 0 && rect.bottom > 0) { var scrollPercentage = rect.top / rect.height; }