DEV Community

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

Posted on

5 2

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 { }
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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay