loading...
Cover image for GSAP Animations in Angular - Apply directive to html

GSAP Animations in Angular - Apply directive to html

nicolalc profile image Nicola ・1 min read

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:

FadeInAnimation example

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>

FadeInAnimation example 2

Discussion

pic
Editor guide