Tengo un svg que forma la base de mi scroller horizontal .

Dentro de este svg , he agregado la clase .animate a los elementos que quiero que se desvanezcan a medida que el elemento aparece. La clase .animate para referencia se ha agregado a todos los elementos de texto en el svg .

Actualmente, solo los elementos .animate que están a la vista inicialmente se desvanecen. Cuando me desplazo hacia abajo para continuar con el desplazamiento, los otros elementos son estáticos. ¿No se están desvaneciendo o translating hacia arriba o hacia abajo de alguna manera?

TL; DR, esto es lo que estoy tratando de lograr:

• Cuando el desplazador se fija en su lugar y el usuario continúa desplazándose hacia abajo, comienza a desvanecerse .horizontalScroller__intro .
• Una vez .horizontalScroller__intro se haya desvanecido, comience el desplazamiento horizontal para .horizontalScroller__items
• Cualquier elemento con la clase de .animate en mi scroller se desvanecerá hasta su posición original.

Nota : Entiendo las reglas y preferencias de SO para publicar el código aquí. Pero mis demostraciones contienen un SVG de longitud, que no puedo publicar aquí porque supera el límite de caracteres de SO.

Aquí hay una demostración de mi último enfoque.

De los documentos de scrollTrigger , containerAnimation es lo que ayuda a lograr animaciones en los desplazadores horizontales, y es lo que he tratado de lograr.

Sin embargo, en mi demostración anterior, tengo los siguientes problemas:

1. .horizontalScroller__intro no se muestra inicialmente, cuando debería, y debería desaparecer al desplazarse.
2. El scroller horizontal ya no funciona
3. Los elementos .animate que están a la vista, no se desvanecen hacia arriba

Si uso la línea de timeline (vea el fragmento a continuación), la introducción se desvanece y el desplazamiento funciona. Pero no se anima en los elementos secundarios, que es donde necesito containerAnimation

 $(function() { let container = document.querySelector(".horizontalScroller__items"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: true, invalidateOnRefresh: true, refreshPriority: 1, end: '+=4000px', markers: true, } }); tl.to('.horizontalScroller__intro', { opacity: 0, }) tl.to(container, { x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", }) });

Estoy luchando por encontrar una manera en la que pueda hacer que la introducción se desvanezca, el desplazador se desplace horizontalmente y los elementos .animate se desvanezcan o se desvanezcan.

Editar:

@onkar ruikar , vea las notas basadas en su sandbox a continuación:

1. Cuando se desplaza hacia abajo y aparece, quiero que los elementos .animate iniciales se desplacen hacia arriba para que se vean (actualmente, una vez que el texto se desvanece y luego el desplazamiento horizontal comienza a funcionar, solo entonces aparece el .animate que se supone que debe ser a la vista, desvanecerse hacia arriba
2. Después de que se hayan cargado los elementos .animate iniciales, los siguientes elementos .animate que forman parte del desplazador no se desvanecen hacia arriba. Son estáticos. A medida que aparece cada elemento .animate , debería aparecer gradualmente (creo que actualmente se activa una vez, para todos los elementos).

Ver imagen aquí:

En el gif anterior, puede ver que los primeros dos bloques de texto están ocultos, tan pronto como estén a la vista, quiero que desaparezcan. Luego, los bloques de texto tercero y cuarto son estáticos, cuando deberían desaparecer a medida que el usuario se desplaza a esa sección.