Slider Horizontal con GSAP + ScrollTrigger + ReactJS - Parte 2 | DWDC - FRF #27

[@AnimatiCSS]

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

[@nihil_um]

Hola, Ricardo. Hay una cosilla que no entiendo bien. En el archivo c-slider.js, en la línea 47 (27:31) escribes: gsap.to(proxy, {...). Si he entendido bien, ¿el primer parámetro que se le pasa a gsap.to() no debería ser una clase (o un "id" ) que haga referencia a un elemento del dom que queramos animar?. Tú le estás pasando un objeto {skew: 0}. Me pierdo un poco con eso. Un saludo.

[@AnimatiCSS]

Hola nihil, parece ser que se puede animar un objeto que contenga una propiedad animable por gsap, es decir, en el target en vez de pasar un selector o un nodo concreto, le paso el objeto proxy, que tiene la propiedad proxy.skew, para que gsap anime ese valor de la propiedad proxy.skew. es decir, está animando únicamente el valor de la variable proxy.skew. eso es lo que hace por debajo parece ser y por lo que he llegado a entender. Esta pregunta es muy buena para los foros de GSAP, si tengo un momento la haré para confirmar, pero diría que estoy en lo cierto. Un saludo!

[@nihil_um]

@@AnimatiCSS Vale, creo que lo he pillado. Me imagino que es algo "parecido" a cuando se hace un gsap.fromTo(), donde se produce la animación de un objeto con propiedades a otro otro objeto con valores distintos para las mismas propiedades. Solo que en el caso que se trata en este video, el selector vendría incluido en la expresión gsap.quickSetter(). Gracias por la aclaración.

[@AnimatiCSS]

Hola nihil, no se si es correcto lo que dices, pero por si acaso quiero expresarme un poco más, yo lo resumiría así: si le pasas un objeto al gsap.to y este tiene dentro una propiedad con el mismo nombre que una propiedad de gsap animable (por ejemplo skew), entonces gsap.to tratará cómo un "nodo" ese objeto que le pasas, y animará su valor skew, que en este caso es una propiedad, una variable. Estamos "animando" una variable, estamos cambiando su valor en X segundos establecido por GSAP. Por lo menos así lo he entendido yo, pero si descubres algo más o estoy equivocado, ya dirás! Un saludo!

[@nihil_um]

@@AnimatiCSS Ahm, ok. Pues nada. Sea como sea, ahora me queda más claro que se puede usar esa función de esa manera. Un saludo.

[@f18261]

Buenas! genial el video, super claro. Hay algoq ue queria consutlarte, entiendo que el scrolltrigger tiene efecto a partir del height del contenedor, en este caso la pagina no tiene otros elementos, como es que tiene ese alto ? Se modifico manualmente la altura del contenedor en base al scrollwidth? Gracias!

[@AnimatiCSS]

Hola, gracias lo primero! Sobre tu duda, la página no tiene altura de entrada pero scrolltrigger cuando usamos la propiedad "pin", realmente crea un nodo que envuelve el que va a estar siguiéndote, y aplica un alto a ese nodo (el alto necesario extra). Entonces supongamos que el slider ahora tiene una altura 100vh, pero el nodo extra envolvente para hacer el efecto pin tiene un alto total de 400vh, por poner un ejemplo. Entonces scrolltrigger añade esos 300vh extra para que, durante 300vh que vas haciendo scroll, te sigue el slider en la vista, simulando un position sticky de css por así decir. Mientras te sigue el slider a su vez el internamente va aplicando un transformX para mover los slides y así ocurre la magia! Espero haber aclarado mejor el concepto, un saludo!

[@nahueljj]

tenes cursos de gsap?

[@AnimatiCSS]

Hola, no como tal, aunque tengo algún video donde lo utilizo y explico el funcionamiento necesario para esa animación del video. Un saludo!