GSAP Animations in Angular - Apply directive to html

Let's apply the directive to our HTML elements!

Now we can apply the directive to our HTMLElements. First of all we need to declare the FadeInDirective inside the AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FadeInAnimationDirective} from './directives/gsap/fade-in-animation.directive';

@NgModule({
  declarations: [
    AppComponent,
    FadeInAnimationDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And in your app.component.html add this HTML:

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>

We are creating a paragraph animated with a fadeIn animation using our directive, with a duration of 1 second and a delay of 1 second too! This should be the result:

GIF

As you can see, the animation is working! You can also combine different animations using different delays:

<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
>
  This too, but a little bit delayed
</p>

GIF