/* ============================================================ animations.css Estados de partida de lo que anima GSAP. TODO cuelga de .js-anim, una clase que pone un script en linea del antes de pintar. Es a proposito y es la parte importante de este archivo: - Si el JavaScript falla, no llega, o el navegador lo bloquea, la clase no se pone y NADA queda escondido. La pagina se ve entera, sin animacion. Ocultar con CSS a secas y confiar en que el JS lo revele es como se dejan articulos en blanco. - Si el sistema pide menos movimiento (prefers-reduced-motion), ese mismo script tampoco pone la clase. Nada se oculta y nada se mueve, sin necesidad de repetir la condicion aqui. Poner los estados de partida en CSS y no con gsap.set() evita el parpadeo: gsap.set() corre cuando ya se ejecuto el script, y para entonces el navegador puede haber pintado el elemento visible. ============================================================ */ /* ------------------------------------------------------------ 1. Revelados al hacer scroll ------------------------------------------------------------ */ /* Las tarjetas de los temas y las de recomendados. Se anima la .column y no la tarjeta de dentro: la tarjeta lleva vanilla-tilt, que le escribe su propio transform, y las dos librerias pelearian por la misma propiedad. */ .js-anim #PostContainer > .column, .js-anim .general-container-recomended .column { opacity: 0; } .js-anim .anim-reveal { opacity: 0; } /* ------------------------------------------------------------ 2. Portada ------------------------------------------------------------ */ .js-anim .hero-title-layer, .js-anim .hero-general-layer { opacity: 0; } /* ------------------------------------------------------------ 3. Contadores ------------------------------------------------------------ */ /* Las cifras no se ocultan: se quedan en su sitio y solo cambia el numero. Si se ocultaran, un lector de pantalla que llegue antes de que arranque la cuenta leeria un hueco. Se reserva el ancho con tabular-nums para que el bloque no baile mientras sube. */ .js-anim .ap-stat-value { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ 4. Articulo ------------------------------------------------------------ */ /* El panel del articulo y el selector de tipo de lectura entran juntos al abrir la pagina. La ficha del autor y el pie esperan al scroll. */ .js-anim .container-article-altrn, .js-anim .container-article-altrn-infographic, .js-anim .reading-mode:not([hidden]), .js-anim .author-container, .js-anim .sf-card { opacity: 0; } /* ------------------------------------------------------------ 6. Barra de progreso de lectura ------------------------------------------------------------ */ /* Por encima del navbar (que va en z-index 30 con is-fixed-top): la barra tiene que verse siempre, es lo unico que dice cuanto queda. */ .rp-bar { position: fixed; top: 0; left: 0; z-index: 40; width: 100%; height: 3px; /* El ancho se anima con scaleX y no con width: scaleX lo resuelve la GPU y no obliga a recalcular la maqueta en cada fotograma del scroll, que es justo cuando menos margen hay. */ transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; /* Los dos tonos del tema, de izquierda a derecha. Salen de --pg-a y --pg-b, que define la clase del tema en Pagination.css: la misma pareja de colores que usa la pastilla del paginador y que sale de la onda de la seccion. En horizontal y no en vertical porque la barra mide 3px de alto: un degradado vertical se ve como un color plano y se pierde el segundo tono. Recorriendola de lado a lado, el color acompaña al avance. El respaldo es el degradado de marca, para las paginas que no tienen tema (el home, los perfiles). */ background-image: linear-gradient(90deg, var(--pg-a, #3ec1be) 0%, var(--pg-b, #cd366d) 100%); } /* La clase del tema trae su propio background con el degradado vertical del paginador, y como shorthand pisaria el de arriba. Repetir la clase sube la especificidad sin recurrir a !important. */ .rp-bar.rp-bar { background-image: linear-gradient(90deg, var(--pg-a, #3ec1be) 0%, var(--pg-b, #cd366d) 100%); background-color: transparent; box-shadow: none; } /* ------------------------------------------------------------ 7. Cambio de tipo de lectura (Flip) ------------------------------------------------------------ */ /* Flip ya anima el reacomodo entero, asi que el desvanecido propio del selector sobra: eran dos gestos contando lo mismo y se ensuciaban entre si. Sin .js-anim sigue estando, que es el comportamiento de siempre. */ .js-anim .container-article-altrn.is-switching { opacity: 1; transition: none; } /* La clase la pone y la quita animations.js mientras dura el reacomodo. Flip corre con absolute: true, o sea que saca a los hijos del flujo para poder moverlos. Eso obliga a dos cosas en el contenedor: - position: relative, para que esos hijos se posicionen contra el panel. Sin esto se posicionan contra la pagina y aparecen fuera de la tarjeta, encima de la ficha del autor. - overflow: hidden, porque durante el recorrido hay bloques todavia en su sitio de antes, que puede caer fuera del alto nuevo. */ .js-anim .container-article-altrn.is-flipping { position: relative; overflow: hidden; } /* ------------------------------------------------------------ 8. Cronologia de experiencia laboral ------------------------------------------------------------ */ /* La linea gris de los
  • se queda como carril; encima se dibuja otra con el degradado de marca, que crece con el scroll. Los puntos se encienden segun los va alcanzando. */ .js-anim .ap-timeline { position: relative; } .js-anim .ap-progress { position: absolute; z-index: 1; width: 2px; border-radius: 2px; background-image: var(--ap-grad); /* Crece desde arriba: el origen tiene que ser el borde superior, no el centro, o la linea se estiraria hacia los dos lados. */ transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; } /* Los puntos, por encima de la linea que dibuja. */ .js-anim .ap-timeline > ol > li::before { z-index: 2; transition: transform 0.3s var(--rp-ease, ease), box-shadow 0.3s var(--rp-ease, ease), background-color 0.3s var(--rp-ease, ease); } /* Alcanzado por la linea. El halo es lo que hace que se lea como "encendido" y no solo como un cambio de color. */ .js-anim .ap-timeline > ol > li.is-reached::before { background-color: transparent; background-image: var(--ap-grad); transform: scale(1.3); box-shadow: 0 0 0 4px rgb(62 193 190 / 16%); }