DEV Community

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

Posted on

GSAP Animations in Angular - Apply directive to html

#tutorial #angular #typescript #greensock

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 { }
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

FadeInAnimation example 2

Top comments (0)