Parallax al mover el cursor (on Mouse Move) con GSAP! b-about parte 2 | DWDC - FRF #24

En este vídeo, añadiré animaciones de parallax en función del movimiento del cursor! Además de terminar de maquetar el bloque about (b-about) de la web calcando el diseño.
La animación que haré de parallax la he creado con la librería GSAP (GreenSock) de JavaScript.
Si queremos ganar un SOTD de Awwwards, debemos aplicar animaciones avanzadas y con un resultado increíble.
Librería de JavaScript GSAP (GreenSock):
greensock.com/...
NEXTjs transpile modules:
www.npmjs.com/...
GSAP + NEXTjs:
greensock.com/...
React Device Detect:
www.npmjs.com/...
React Hook useIsTouchDevice():
stackoverflow....
getBoundingClientRect():
developer.mozi...
¿Parallax JS?:
• ¿Qué es el efecto para...
NextJS, componente Link:
nextjs.org/doc...
Excel del proyecto:
docs.google.co...
¿Qué es Awwwards? ¿Qué es un SOTD?:
• ¿Qué es un Site of th...
-------
Soy Ricardo, desarrollador web front end.
Website: animaticss.com/
Instagram: / animaticss
LinkedIn: / ricardo-garcia-llanos
Udemy (curso) - BEM CSS + ITCSS = Metodología BEMIT: www.udemy.com/...
Codepen: codepen.io/ani...
-------
Song: Spitfya x Desembra - Cut The Check [NCS Release]
Music provided by NoCopyrightSounds
Free Download/Stream: ncs.io/cutthecheck
Watch: • Spitfya x Desembra - C...

[@AnimatiCSS]

CURSO BEMIT CSS 👉 www.udemy.com/course/bem-css-itcss-metodologia-bemit-diseno-web-avanzado/?referralCode=428854CE5BB65C9B3D9C

[@nihil_um]

Hola, Ricardo. Tengo una pequeña duda. ¿Cómo podríamos limpiar esos eventos que se añaden a una etiqueta en React?. Porque sé que en el useEffect se aprovecha la función return para limpiar el evento pero no caigo en cómo se puede limpiar un evento que añadimos directamente a una etiqueta en React. En este ejercicio tu añades 3 eventos directamente a la etiqueta pero no los limpias cuando el componente se desmonta (o igual se me ha pasado). Un saludo.

[@AnimatiCSS]

Hola Nihil, muy buena pregunta. Te comento, hasta donde yo sé, los eventos sintéticos de react parece ser que los limpia react internamente al desmontarse el componente, encontré este artículo: www.pluralsight.com/guides/how-to-cleanup-event-listeners-react (sección 3). Eso explicaría porqué está funcionando bien, ya que he añadido un console.log dentro de onMouseEnter (por ejemplo) y no se lanza más veces de las que se esperan ni hace ningún comportamiento extraño. Así que aunque se me había pasado controlar la "limpieza de eventos", parece que funciona bien gracias a React, que lo limpia internamente al estar manejado por un evento sintético. Pero desde luego que has hecho una muy buena pregunta, se me había pasado! Por suerte no ha sido un fallo! Gracias un saludo

[@nihil_um]

@@AnimatiCSS Mil gracias por contestar y resolverme la duda.

[@efestudio]

Hola Ricardo, una duda a ver si me la puedes resolver, como es que el selector "&.is-mouse-enter" tiene el '&' delante? los otros selectores tenian un formato distinto tipo: .is-menu-open &{ tiene algo que ver para que no se esté ejecutando correctamente en el navegador? ya que en la consola veo que las imagenes se cargan pero luego no se muestran al hacer el mouse over.

[@AnimatiCSS]

Hola efe, el & lo que hace es usar el selector que ya llevas escrito. Es decir en este caso b-cursor = &. Pero cuidado anidar más selectores hará cambiar el valor &. Usas visual studio? Si enfocas en tu selector un par de segundos te dirá a qué nodo html esta atacando. Si usas &.is-algo quiere decir cuando esté selector que estabas atacando con el & tenga además la clase is-algo. Si haces .is-algo &, estás diciendo cuando algún nodo superior a este, cualquier nodo superior en el árbol dom tenga la clase is-algo y que mi selector actual & esté dentro de ese nodo (hijo directo o en la rama del arbol) entonces aplico esos estilos. Si no te acaba de quedar claro haz pruebas en un generador de estilo de css Online donde puedas escribir scss. Por ejemplo www.sassmeister.com/ Espero que te haya aclarado la duda!

[@efestudio]

@@AnimatiCSS Muchas gracias por tus aclaraciones Ricardo, ahora lo tengo más claro, de todas formas creo que haré el curso este de Bemit para acabar de coger mas base con este tema. Repasando de nuevo el video veo que no se me aplica la clase is-mouse-enter al pasar el cursor por encima de los textos... por otro lado, me ha llamado la atención que ¿puede ser que al final estes escribiendo los textos de directamente desde código en vez de recoger los valores de los campos de texto creados en el BackOffice "Author 1 text" y "Author 2 text"? Saludos y gracias!

[@AnimatiCSS]

@@efestudio Hola, si no se te aplica la clase is-mouse-enter el problema debe ser relacionado con tu JS, que es el encargado de asignar la clase al nodo pertinente. Y lo que mencionas de BAboutAuthor, me parece que sí, me equivoqué y no cogí los datos del back! Lo revisaré bien y de ser así me anotaré esto como un ajuste! Gracias!