Animación de componentes React con GreenSock

Durante los primeros días de la World Wide Web, las cosas eran bastante estáticas y aburridas. Las páginas web se basaban principalmente en el diseño gráfico y los diseños del mundo de la impresión hasta que se introdujeron las animaciones. La animación puede atraer y mantener la atención de las personas por más tiempo que una página web estática y comunica una idea o concepto de manera más clara y efectiva.

Sin embargo, cuando no se hace correctamente, las animaciones pueden dificultar las interacciones del usuario con su producto y afectar negativamente la tracción. GreenSock Animation Platform AKA (GSAP) es una potente biblioteca de JavaScript que permite a los desarrolladores, animadores y diseñadores front-end crear animaciones basadas en la línea de tiempo. Permite a los amantes de la animación tomar un control preciso de sus secuencias de animación en lugar de las propiedades de animation y keyframe a veces restrictivas que ofrece CSS.

En este artículo, le presentaré algunas funciones de GSAP, como scrollTriggers , Timelines , Easing , etc. Al final, crearemos una interfaz de usuario intuitiva animando una aplicación React con estas funciones. Mira el proyecto terminado en codesandbox.

Este artículo te será útil si:

• Ha estado creando animaciones en aplicaciones web con HTML, CSS y JavaScript.
• Ya está creando páginas web animadas en una aplicación React con paquetes como animate.css, React-motion, Framer-motion y React-Spring, además desea ver alternativas.
• Es un entusiasta de React y le gustaría crear animaciones complejas en aplicaciones web basadas en React.

Veremos cómo crear una variedad de animaciones a partir de un proyecto web existente. ¡Hagámoslo!

Nota : este artículo asume que se siente cómodo con HTML, CSS, JavaScript y React.js.

¿Qué es GSAP?

La plataforma de animación GreenSock, también conocida como GSAP, es una animación de nivel profesional y rendimiento ultraalto para la web moderna que permite a los desarrolladores animar sus aplicaciones de forma modular, declarativa y reutilizable. Es independiente del marco y se puede usar en cualquier proyecto basado en JavaScript, tiene un tamaño de paquete mínimo y no inflará su aplicación.

GSAP puede realizar animaciones de lienzo, que se utilizan para crear experiencias WebGL y crear animaciones SVG dinámicas y como excelente soporte de navegador.

¿Por qué utilizar GSAP?

Tal vez aún no esté listo para traicionar otros marcos, o no se haya convencido de aceptar las bondades que vienen con GSAP. Permítame darle algunas razones por las que puede considerar GSAP.

Puedes construir animaciones complejas

La biblioteca JavaScript de GSAP hace posible que los desarrolladores construyan animaciones basadas en la física, desde simples hasta muy complejas, como en el caso de estos sitios, permite a los desarrolladores y diseñadores secuenciar el movimiento y controlar la animación de forma dinámica. Tiene muchos complementos como DrawSVGPlugin, MorphSVGPlugin y más, lo que hace que la creación de animaciones basadas en SVG y animaciones 2D/3D sea una realidad. Además de integrar GSAP en elementos DOM, puede usarlos en animaciones basadas en contexto WebGL/Canvas/ Three.js.

Además, la capacidad de aceleración de GSAP es bastante sofisticada, lo que hace posible crear efectos avanzados con múltiples beziers en comparación con la animación CSS normal.

Rendimiento

GSAP tiene un alto rendimiento impresionante en diferentes navegadores.

Según el equipo de GSAP, en su sitio web, “GSAP es 20 veces más rápido que jQuery, además GSAP es la herramienta de animación con secuencias de comandos completa más rápida del planeta. Es incluso más rápido que las animaciones y transiciones CSS3 en muchos casos”. Confirme la comparación de velocidad por sí mismo.

Además, las animaciones GSAP funcionan sin esfuerzo tanto en computadoras de escritorio, tabletas y teléfonos inteligentes. No es necesario agregar una larga lista de prefijos, GSAP se encarga de todo esto bajo el capó.

Puede ver más beneficios en GSAP o ver lo que dice Sarah Drasner al respecto aquí.

Contras de GSAP

¿Estás diciendo que siempre debo usar GSAP para cada proyecto? ¡Por supuesto que no! Siento que solo hay una razón por la que quizás no quieras usar GSAP. ¡Vamos a averiguar!

• GSAP es únicamente una biblioteca de animación basada en JavaScript, por lo que requiere cierto conocimiento de la manipulación de JavaScript y DOM para utilizar de manera efectiva sus métodos y API. Esta desventaja de la curva de aprendizaje deja aún más espacio para las complicaciones para un principiante que comienza con JavaScript.
• GSAP no se adapta a las animaciones basadas en CSS, por lo tanto, si está buscando una biblioteca para esto, también puede usar keyframes en la animación CSS.

Si tienes alguna otra razón, no dudes en compartirla en la sección de comentarios.

Muy bien, ahora que se aclararon sus dudas, pasemos a algunos detalles del GSAP.

Conceptos básicos de GSAP

Antes de crear nuestra animación usando React, familiaricémonos con algunos métodos y elementos básicos de GSAP.

Si ya conoce los fundamentos de GSAP, puede omitir esta sección y pasar directamente a la sección del proyecto, donde haremos que una página de destino se sesgue mientras se desplaza.

interpolación

Una interpolación es un único movimiento en una animación. En GSAP, una interpolación tiene la siguiente sintaxis:

 TweenMax.method(element, duration, vars)

Echemos un vistazo a lo que representa esta sintaxis;

1. El method se refiere al método GSAP con el que le gustaría interpolar.
2. element es el elemento que desea animar. Si desea crear interpolaciones para varios elementos al mismo tiempo, puede pasar una matriz de elementos a element .
3. la duration es la duración de su interpolación. Es un número entero en segundos (¡sin el sufijo s !).
4. vars es un objeto de las propiedades que desea animar. Más sobre esto más adelante.

Métodos GSAP

GSAP proporciona numerosos métodos para crear animaciones. En este artículo, mencionaremos solo algunos, como gsap.to , gsap.from , gsap.fromTo . Puede consultar otros métodos geniales en su documentación. Los métodos discutidos en esta sección se utilizarán para construir nuestro proyecto más adelante en este tutorial.

• gsap.to() los valores a los que se debe animar un objeto, es decir, los valores de propiedad final de un objeto animado, como se muestra a continuación:
  

   gsap.to('.ball', {x:250, duration: 5})

Para demostrar el método to , la siguiente demostración de codepen muestra que un elemento con una clase de bola de 250px se moverá a través del x-axis en cinco segundos cuando los componentes se monten. Si no se proporciona una duración, se usaría un valor predeterminado de 500 milisegundos.

Nota : los ejes x e y-axis horizontal y vertical respectivamente, también en las propiedades de transformación de CSS, como translateX y translateY , se representan como x e y para las transformaciones pixel-measured y xPercent e yPercent para las transformaciones basadas en porcentajes.

Para ver el fragmento completo del código, consulte el área de juegos de codepen.

• gsap.from() — Define los valores desde los que se debe animar un objeto — es decir, los valores iniciales de una animación:
  

   gsap.from('.square', {duration:3, scale: 4})

La demostración de codepen muestra cómo se cambia el tamaño de un elemento con una clase de square de una escala de 4 en 3 3seconds cuando se montan los componentes. Busque el fragmento de código completo en este codepen.

• gsap.fromTo() : ​​le permite definir los valores inicial y final de una animación. Es una combinación de los métodos from() y to() .

Así es como se ve;

 gsap.fromTo('.ball',{opacity:0 }, {opacity: 1 , x: 200 , duration: 3 }); gsap.fromTo('.square', {opacity:0, x:200}, { opacity:1, x: 1 , duration: 3 });

Este código animaría el elemento con una clase de ball de una opacidad de 0 a una opacidad de 1 en el x-axis en 3 seconds y la clase square se animaría de una opacidad de 0 a 1 en 3 seconds en el x-axis solo cuando el componente se monta. Para ver cómo funciona el método fromTo y el fragmento de código completo, consulte la demostración en CodePen a continuación.

Nota : siempre que estemos animando propiedades posicionales, como left y top , debemos asegurarnos de que los elementos en cuestión tengan una propiedad de posición CSS relative , absolute o fixed .

facilitando

La documentación oficial de GSAP definió la aceleración como la forma principal de cambiar el tiempo de sus preadolescentes. Determina cómo un objeto cambia de posición en diferentes puntos. Ease controla la velocidad de cambio de la animación en GSAP y se utiliza para establecer el estilo de la animación de un objeto.

GSAP proporciona diferentes tipos de facilidades y opciones para brindarle más control sobre cómo debe comportarse su animación. También proporciona un visualizador de facilidad para ayudarlo a elegir su configuración de facilidad preferida.

Hay tres tipos de facilidades, y varían en sus operaciones.

1. in() — El movimiento comienza lentamente, luego aumenta el ritmo hacia el final de la animación.
2. out() : la animación comienza rápido y luego se ralentiza al final de la animación.
3. inOut() : la animación comienza lentamente, aumenta el ritmo a la mitad y finaliza lentamente.

En este ejemplo de aceleración, encadenamos las interpolaciones que mostraban los tres tipos de bounce.in , bounce.out y bounce.inOut , y establecimos un retraso de la cantidad de segundos que tarda la animación en completarse antes de comenzar la siguiente solo cuando el componente es monturas. Este patrón es repetitivo, en la siguiente sección veremos cómo podemos usar una línea de tiempo para hacerlo mejor.

Cronologías

Una línea de tiempo actúa como un contenedor para varias interpolaciones. Anima las interpolaciones en orden secuencial y no depende de la duración de la interpolación anterior. La línea de tiempo simplifica el control de los interpolados como un todo y administra con precisión su sincronización.

Las líneas de tiempo se pueden escribir creando una instancia de una línea de tiempo así:

 gsap.timeline();

También puede encadenar múltiples interpolaciones a una línea de tiempo de dos maneras diferentes, en el siguiente código:

 ##Method 1 const tl = gsap.timeline(); // create an instance and assign it a variable tl.add(); // add tween to timeline tl.to('element', {}); tl.from('element', {}); ##Method 2 gsap.timeline() .add() // add tween to timeline .to('element', {}) .from('element', {})

Recreemos el ejemplo anterior con una línea de tiempo:

 const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app')); const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app'));

Dentro de un gancho useEffect , creamos una variable (tl) que contiene una instancia de una línea de tiempo, luego usamos la variable tl para animar nuestra interpolación en secuencia sin depender de la interpolación anterior para animar, pasando las mismas propiedades que en el ejemplo anterior. Para obtener el fragmento de código completo de esta demostración, consulte el patio de recreo codepen a continuación.

Vea la demostración de Pen [React GSAP (Easing with Timeline)] (https://codepen.io/smashingmag/pen/zYqaEmE) de Blessing Krofegha.

Ahora que tenemos una idea de algunos de los componentes básicos de GSAP, veamos cómo podemos crear una animación completa en una aplicación React típica en la siguiente sección. ¡Comencemos el vuelo!

Creación de una página de destino animada con React y GSAP

Vamos a animar una aplicación React. Asegúrese de clonar el repositorio antes de comenzar y ejecute npm install para instalar las dependencias.

¿Qué estamos construyendo?

Actualmente, nuestra página de destino contiene algunos textos con fondo blanco, un menú que no se despliega, realmente sin animación. Lo siguiente es lo que agregaremos a la página de destino;

• Anime el texto y el logotipo en la página de inicio, para que se vea fácilmente cuando se monta el componente.
• Animar el menú, para que se despliegue cuando se hace clic en el menú.
• Haga que las imágenes en la página de la galería 20deg cuando la página se desplace.

Echa un vistazo a la demostración en codesandbox.

Dividiremos el proceso de nuestra página de destino en componentes, para que sea fácil de comprender. Aquí está el proceso;

• Definir los métodos de animación,
• Animar texto y logotipo,
• Alternar menú,
• Haga que las imágenes 20deg en el desplazamiento de la página.

componentes

• Animate.js — Definió todos los métodos de animación,
• Image.js — importar imágenes de galera,
• Menu.js : contiene la funcionalidad de cambio de menú,
• Header.js : contiene enlaces de navegación.

Definir métodos de animación.

Cree una carpeta de component dentro del directorio src y cree un archivo animate.js . Copie y pegue el siguiente código en él.

 import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger"; //Animate text export const textIntro = elem => { gsap.from(elem, { xPercent: -20, opacity: 0, stagger: 0.2, duration: 2, scale: -1, ease: "back", }); };

Aquí, gsap . Escribimos una función de flecha exportada que anima el texto en la página de destino. Recuerde que el método gsap.from() define los valores desde los que se debe animar un objeto. La función tiene un parámetro elem que representa la clase que necesita ser animada. Toma algunas propiedades y asigna valores como xPercent: -20 (transforma el objeto en -20%), no le da al objeto opacidad, hace que el objeto scale en -1 , hace que el objeto ease en 2sec .

Para ver si esto funciona, diríjase a App.js e incluya el siguiente código.

 ... //import textIntro import {textIntro} from "./components/Animate" ... //using useRef hook to access the textIntro DOM let intro = useRef(null) useEffect(() => { textIntro(intro) }, []) function Home() { return ( <div className='container'> <div className='wrapper'> <h5 className="intro" ref={(el) => (intro = el)}></h5> The <b>SHOPPER</b>, is a worldclass, innovative, global online ecommerce platform, that meets your everyday daily needs. </h5> </div> </div> ); }

Aquí, importamos el método textIntro del componente Aminate . Para acceder al DOM solíamos usar useRef Hook. Creamos una intro variable cuyo valor se establece en null . A continuación, dentro del gancho useEffect , llamamos al método textIntro ya la variable intro . Dentro de nuestro componente de inicio, en la etiqueta h5 , definimos el ref prop y pasamos la variable de intro .

A continuación, tenemos un menú, pero no se despliega cuando se hace clic en él. ¡Hagámoslo funcionar! Dentro del componente Header.js , agregue el código a continuación.

 import React, { useState, useEffect, useRef } from "react"; import { withRouter, Link, useHistory } from "react-router-dom"; import Menu from "./Menu"; const Header = () => { const history = useHistory() let logo = useRef(null); //State of our Menu const [state, setState] = useState({ initial: false, clicked: null, menuName: "Menu", }); // State of our button const [disabled, setDisabled] = useState(false); //When the component mounts useEffect(() => { textIntro(logo); //Listening for page changes. history.listen(() => { setState({ clicked: false, menuName: "Menu" }); }); }, [history]); //toggle menu const toggleMenu = () => { disableMenu(); if (state.initial === false) { setState({ initial: null, clicked: true, menuName: "Close", }); } else if (state.clicked === true) { setState({ clicked: !state.clicked, menuName: "Menu", }); } else if (state.clicked === false) { setState({ clicked: !state.clicked, menuName: "Close", }); } }; // check if out button is disabled const disableMenu = () => { setDisabled(!disabled); setTimeout(() => { setDisabled(false); }, 1200); }; return ( <header> <div className="container"> <div className="wrapper"> <div className="inner-header"> <div className="logo" ref={(el) => (logo = el)}> <Link to="/">SHOPPER.</Link> </div> <div className="menu"> <button disabled={disabled} onClick={toggleMenu}> {state.menuName} </button> </div> </div> </div> </div> <Menu state={state} /> </header> ); }; export default withRouter(Header);

En este componente, definimos nuestro menú y el estado del botón, dentro del gancho useEffect , escuchamos los cambios de página usando el gancho useHistory , si la página cambia, establecemos los valores de estado clicked y menuName en false y Menu respectivamente.

Para manejar nuestro menú, verificamos si el valor de nuestro estado inicial es falso, si es verdadero, cambiamos el valor de initial , clicked y menuName a null , true y Close . De lo contrario, verificamos si se hace clic en el botón, si es cierto, cambiaríamos el menuName del menú a Menu . A continuación, tenemos una función disabledMenu que desactiva nuestro botón durante 1sec cuando se hace clic en él.

Por último, en nuestro button , asignamos disabled a disabled , que es un valor booleano que deshabilitará el botón cuando su valor sea true . Y el controlador onClick del botón está vinculado a la función toggleMenu . Todo lo que hicimos aquí fue alternar el texto de nuestro menu y pasar el estado a un componente de Menu , que crearíamos lo antes posible. Escribamos los métodos que harán que nuestro menú se despliegue antes de crear el componente de Menu real. Dirígete a Animate.js y pega este código en él.

 .... //Open menu export const menuShow = (elem1, elem2) => { gsap.from([elem1, elem2], { duration: 0.7, height: 0, transformOrigin: "right top", skewY: 2, ease: "power4.inOut", stagger: { amount: 0.2, }, }); }; //Close menu export const menuHide = (elem1, elem2) => { gsap.to([elem1, elem2], { duration: 0.8, height: 0, ease: "power4.inOut", stagger: { amount: 0.07, }, }); };

Aquí, tenemos una función llamada menuShow , que sesga el menú horizontalmente en 2degrees , facilita el menú, compensa la animación usando la propiedad de stagger y transforma el menú de right to top en 0.7sec , las mismas propiedades se aplican a la función menuHide . Para usar estas funciones, cree el archivo Menu.js dentro de los components y pegue este código en él.

 import React, {useEffect, useRef} from 'react' import { gsap } from "gsap" import { Link } from "react-router-dom" import { menuShow, menuHide, textIntro, } from './Animate' const Menu = ({ state }) => { //create refs for our DOM elements let menuWrapper = useRef(null) let show1 = useRef(null) let show2 = useRef(null) let info = useRef(null) useEffect(() => { // If the menu is open and we click the menu button to close it. if (state.clicked === false) { // If menu is closed and we want to open it. menuHide(show2, show1); // Set menu to display none gsap.to(menuWrapper, { duration: 1, css: { display: "none" } }); } else if ( state.clicked === true || (state.clicked === true && state.initial === null) ) { // Set menu to display block gsap.to(menuWrapper, { duration: 0, css: { display: "block" } }); //Allow menu to have height of 100% gsap.to([show1, show2], { duration: 0, opacity: 1, height: "100%" }); menuShow(show1, show2); textIntro(info); } }, [state]) return ( <div ref={(el) => (menuWrapper = el)} className="hamburger-menu"> <div ref={(el) => (show1 = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (show2 = el)} className="menu-layer"> <div className="container"> <div className="wrapper"> <div className="menu-links"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/about-us" > About </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/gallery" > Gallery </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact-us" > Contact us </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Our Vision</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.... </p> </div> </div> </div> </div> </div> </div> ); } export default Menu

Lo que hicimos en el componente Menu fue importar las funciones animadas, que son menuShow , menuHide y textIntro . Luego, asignamos variables para cada refs creada para nuestros elementos DOM usando el useRef y pasamos null como sus valores. Dentro del gancho useEffect , verificamos el estado del menu , si el clicked es false , llamamos a la función menuHide , de lo contrario, si el estado del clicked es verdadero, llamamos a la función menuShow . Por último, nos aseguramos de que los elementos DOM en cuestión pasen sus show2 específicas, que son refs , menuWrapper , show1 . Con eso, tenemos nuestro menú animado.

Veamos cómo se ve.

La última animación que implementaríamos es hacer que nuestras imágenes en nuestra galería se skew cuando se desplaza. Veamos ahora el estado de nuestra galería.

Para implementar la animación sesgada en nuestra galería, diríjase a Animate.js y agréguele algunos códigos.

 .... //Skew gallery Images export const skewGallery = elem1 => { //register ScrollTrigger gsap.registerPlugin(ScrollTrigger); // make the right edge "stick" to the scroll bar. force3D: true improves performance gsap.set(elem1, { transformOrigin: "right center", force3D: true }); let clamp = gsap.utils.clamp(-20, 20) // don't let the skew go beyond 20 degrees. ScrollTrigger.create({ trigger: elem1, onUpdate: (self) => { const velocity = clamp(Math.round(self.getVelocity() / 300)); gsap.to(elem1, { skew: 0, skewY: velocity, ease: "power3", duration: 0.8, }); }, }); }

Creamos una función llamada skewGallery , pasamos elem1 como parámetro y registramos ScrollTrigger .

ScrollTrigger es un complemento en GSAP que nos permite activar animaciones basadas en desplazamiento, como en este caso sesgar las imágenes mientras la página se desplaza.

Para hacer que el borde derecho se adhiera a la barra de desplazamiento, pasamos el valor del right center a la propiedad transformOrigin , también configuramos la propiedad force3D en true en otro para mejorar el rendimiento.

Declaramos una variable de clamp que calcula nuestro sesgo y asegura que no exceda 20degs . Dentro del objeto ScrollTrigger , asignamos la propiedad de trigger al elem1 , que sería el elemento que debe activarse cuando llamamos a esta función. Tenemos una función de devolución de llamada onUpdate , dentro de ella hay una variable de velocity que calcula la velocidad actual y la divide por 300 .

Por último, animamos el elemento a partir de sus valores actuales estableciendo otros valores. Configuramos skew para que inicialmente esté en 0 y skewY para que sea la variable de velocity en 0.8 .

A continuación, debemos llamar a esta función en nuestro archivo App.js

 .... import { skewGallery } from "./components/Animate" function Gallery() { let skewImage = useRef(null); useEffect(() => { skewGallery(skewImage) }, []); return ( <div ref={(el) => (skewImage = el)}> <Image/> </div> ) } ....

Aquí, skewGalley de ./components/Animate , creamos una referencia skewImage que apunta al elemento de imagen. Dentro del gancho useEffect , llamamos a la función skewGallery y pasamos la referencia skewImage como un parámetro. Por último, pasamos skewImage al atributo ref to.

Estarás de acuerdo conmigo en que fue un viaje genial hasta ahora. Aquí está la vista previa en CodeSanbox

El repositorio de apoyo para este artículo está disponible en Github.

Conclusión

Hemos explorado la potencia de GSAP en un proyecto de React, solo arañamos la superficie en este artículo, no hay límite para lo que puede hacer con GSAP en lo que respecta a la animación. El sitio web oficial de GSAP ofrece consejos adicionales para ayudarlo a obtener una comprensión completa de los métodos y complementos. Hay muchas demostraciones que te dejarán boquiabierto con lo que la gente ha hecho con GSAP. Me encantaría escuchar su experiencia con GSAP en la sección de comentarios.

Recursos

1. Documentación GSAP, GreenSock
2. "La guía para principiantes de la plataforma de animación GreenSock", Nicholas Kramer, freeCodeCamp
3. “Una introducción a las animaciones con la API de animación de Greensock (GSAP)”, Zell Liew