Creé una animación de desplazamiento simple para llenar una línea de tiempo vertical basada en la posición de desplazamiento. Enlace al ejemplo de trabajo Mi problema es que la animación todavía parpadea bastante, especialmente en dispositivos móviles. ¿Hay alguna manera de hacer que la animación sea más fluida? Ya traté de resolver esto con la transición css, pero eso no funcionó.
Es simplemente porque sigue cambiando el valor instantáneamente en el desplazamiento. Lo intenté y lo hice sin problemas al agregar una transición css muy simple a App.css en el código:
* { transition: 150ms all; } Una vez que funcione, puede cambiar el selector * al elemento de línea vertical, porque no queremos que se aplique a todos los elementos correctamente, esto es solo para demostración.
También otro enfoque para esto. Creo que no cambiando el valor de la altura todo el tiempo, sino cuando se cumple una cierta diferencia.
Por ejemplo, cambie el componente a este código, tal vez pueda probarlo, al menos en mi PC es lo suficientemente fluido
let lastValue = 0; function App() { useEffect(() => { const timeline = document.querySelector(".timeline"); const timelineDraw = document.querySelector(".timeline__draw"); const bodyRect = document.body.getBoundingClientRect(); const timelineOffset = timeline.getBoundingClientRect().top - bodyRect.top; var moveIndicator = function () { var viewportHeight = window.innerHeight; var hasScrolled = window.pageYOffset; const scrolledFurther = hasScrolled - timelineOffset + viewportHeight / 4; lastValue = lastValue === 0 ? scrolledFurther:lastValue; if (scrolledFurther && scrolledFurther > 0) { if (scrolledFurther > timeline.clientHeight) { timelineDraw.style.height = `${timeline.clientHeight}px`; return; } if (Math.abs(lastValue - scrolledFurther) > 2){ lastValue = scrolledFurther; timelineDraw.style.height = `${scrolledFurther}px`; } return; } timelineDraw.style.height = "0px"; };