Consulte Codepen para comprender mejor lo que estoy tratando de explicar. Puede seguir la consola para ver los valores de las variables en el código a medida que se desplaza.
En la sección 2 tengo tres paneles (panel 1, panel 2 y panel 3), de los que quiero realizar un seguimiento a través de tres barras de progreso separadas a medida que me desplazo. Entonces, mientras me desplazo por la sección 2, mientras el panel 1 está a la vista, la barra de progreso para el panel 1 debería llenarse y así sucesivamente para el panel 2 y el panel 3.
Para que el panel 1 esté a la vista, la sección 2 comienza en 0% y termina en 22%, que (creo) es: sectionProgress / 22 - siendo sectionProgress cuánto me he desplazado en la sección 2. Sin embargo , el panel 2 comienza en 22% de la sección 2 y termina en 75%, mientras que el panel 3 comienza en 75% y termina en 100% <- y aquí es donde no sé qué fórmula usar .
Para decirlo de manera más simple:
cuando el panel 1 está a la vista:
cuando el panel 2 está a la vista:
cuando el panel 3 está a la vista:
Para el panel 2, debe calcular el porcentaje entre el 22% y el 75% de la posición de desplazamiento. Lo calculaste del 0% al 75%. (Se debe aplicar la misma lógica para el panel 3).
if(sectionProgress < 22) { percentagePanelTwo = 0 } else if(sectionProgress <= 75) { percentagePanelTwo = (sectionProgress - 22) / (75-22) } else { percentagePanelTwo = 1; }Otra mejora del código es eliminar los ifs alrededor de cada cálculo del panel.
// remove => if (scrolledFromTop >= sidePanelOffsetPanelOne) {Porque si un usuario se desplaza hacia arriba nuevamente, esto evitará que la barra de progreso se reduzca.
Tenga en cuenta que en el primer ejemplo de código anterior manejé los tres casos:
Si está abierto a una solución más "pura" sin esas veinte dependencias relacionadas con GSAP, aquí hay una recreación de su compilación actual, utilizando CSS scroll-snapping emparejado con detectores de eventos JS para desvanecerse entre los diferentes colores de fondo para cada sección. y también para llenar y vaciar las barras de progreso en consecuencia.
Otra nota aquí, en aras de una UX suave, dado que el primer panel comienza por encima del umbral de desplazamiento que un usuario normalmente tendría que pasar para comenzar a llenar la barra de progreso asociada, establezco condicionalmente una clase smooth en la barra de progreso contenedor con una transición CSS habilitada cuando las barras de progreso se acercan a cualquier borde, en el lado izquierdo o derecho.
Cuando no está cerca del borde, no se necesita transición, por lo que se elimina la clase. Tener la transición allí cuando no se necesita en realidad causa otro efecto secundario indeseable, donde una barra puede comenzar a llenarse antes de que otra termine de llenarse/vaciarse por completo.
Aquí está mi solución, con 0 dependencias: https://codepen.io/brandonmcconnell/pen/f58fd03211eaf02467b1e92c116042b6?editors=0010