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:
.horizontalScroller__intro
..horizontalScroller__intro
se haya desvanecido, comience el desplazamiento horizontal para .horizontalScroller__items
.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:
.horizontalScroller__intro
no se muestra inicialmente, cuando debería, y debería desaparecer al desplazarse..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:
.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.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.
Debe usar el método onUpdate
en el disparador de desplazamiento.
onUpdate: self => console.log("progress", self.progress)
Basado en la opacidad del conjunto de self.progress
, la posición x, etc.
Demostración completa en codesandbox . Haga clic en el botón "Abrir Sandbox" en la parte inferior derecha para ver el código.
if ("scrollRestoration" in history) { history.scrollRestoration = "manual"; } $(function() { let container = document.querySelector(".horizontalScroller__items"); let elements = gsap.utils.toArray( document.querySelectorAll(".animate") ); let intro = document.querySelector(".horizontalScroller__intro"); let svg = document.querySelector("svg"); let animDone = false; window.scrollPercent = -1; var scrollTween = gsap.to(container, { ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: true, invalidateOnRefresh: true, refreshPriority: 1, end: "+=600%", markers: true, onEnter: (self) => { moveAnimate(); }, onLeaveBack: (self) => { resetAnimate(); }, onUpdate: (self) => { let p = self.progress; if (p <= 0.25) { let op = 1 - p / 0.23; intro.style.opacity = op; animDone = false; } if (p > 0.23) { moveAnimate(); // we do not want to shift the svg by 100% to left // want to shift it only by 100% - browser width let scrollPercent = (1 - window.innerWidth / svg.scrollWidth) * 100; let shift = ((p - 0.22) * scrollPercent) / 0.78; gsap.to(svg, { xPercent: -shift }); } } } }); function resetAnimate() { gsap.set(".animate", { y: 150, opacity: 0 }); } resetAnimate(); function moveAnimate() { for (let e of elements) { if (ScrollTrigger.isInViewport(e, 0.4, true)) gsap.to(e, { y: 0, opacity: 1, duration: 2 }); } } });
Debe establecer la opacidad 0 en los elementos .animate
en CSS. Y use end: '+=400%'
en lugar de 4000px. Las dimensiones relativas se pueden utilizar fácilmente en cálculos basados en posiciones.