GSAP es un increíble librería gratuita para hacer animaciones con JavaScript.


Puedes acceder a su página oficial pulsando aquí


A continuación te explicaré cómo implementar esta librería en Angular 11

Instalando la librería

Puedes acceder al recurso pulsando aquí

Creando las directivas

El ejemplo lo haré usando directivas de Angular para ahorrar repetir código.


  1. En la carpeta src/app creamos una nueva carpeta llamada directives y dentro otra llamada gsap

  2. Dentro de la carpeta anterior creamos un fichero de TypeScript llamado core-animation.directive.ts que contendrá una clase

  3. En el interior del fichero escribimos:

  4. El constructor de la clase anterior sólo acepta un parámetro, que será el elmento HTML a animar

    Como puedes apreciar, en el constructor encontrarás:

    Lo que hago es instanciar un timeline pausado y no reversible con dos callbacks, onComplete y onReverseComplete

  5. Creo el método de clase animateIn

  6. Creo la clase FadeInDirective que será la clase que realmente realizar la animación. Para ello, en la carpeta gsap creamos el fichero fade-in-animation.directive.ts

    Esta nueva clase hereda de la clase anterior CoreAnimationClass

  7. En su interior escribimos:

    Como hemos dicho en el punto anterior, al heredar de CoreAnimationClass no es necesario definir ningún @Input ni ningún @Output

Aplicando directivas al HTML

  1. Primero necesitamos añadir al AppModule la directiva FadeInDirective

    Para ello, el app.module.ts quedaría:

  2. Añadir al app.component.html:

  3. ¡DISTRÚTALO!


GITHUB

Puedes encontrar el ejemplo en mi GitHub


Hasta luego ;-)

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría