Create a directive for animation

As the second part of this tutorial we will create anattribute-directive, which will define a specific animation and its attributes.

We will start with a simpleFadeIn animation.

But before starting with the real directive, we are going to create a generic class which will be extended by arbitrary directives, calledCoreAnimationDirective.

The goal of this directive is to define the standard methods and attributes for our future animation directives, to prevent a lot of repeats and hard-to-mantain directives.

TheCoreAnimationDirective class

Let's create! Before doing anything, let's create a specific folder for gsap directive.

From 'src/app' run in terminalmkdir directives\gsap.

Note: use \ or / directory separator according to your system.

Your project should look like this:

Let's create the class, move to the gsap directorycd directives\gsap & echo > core-animation.directive.ts.

Open the file and write the following:

import{ElementRef,EventEmitter,Input,Output}from'@angular/core';import{TimelineMax}from'gsap';exportclassCoreAnimationDirective{@Input()duration=1;@Input()delay=0;@Output()complete:EventEmitter<null>=newEventEmitter();@Output()reverseComplete:EventEmitter<null>=newEventEmitter();protectedtimeline:TimelineMax;constructor(protectedelement:ElementRef){}}

A little bit of explanation:

• @Input() duration - the duration of the animation
• @Input() delay - the delay of the animation
• @Output() complete - event emitter for the animation complete callback
• @Output() reverseComplete - event emitter for the animation reverseComplete callback
• protected timeline: TimelineMax - the timeline for animation

Check the docs aboutTimelineMax andeventCallbackshere.

Theconstructor have only 1 param, the element (ElementRef), it's the ref to the native element which uses the directive.

We need to instantiate ourtimeline before animating it inside the constructor:

constructor(protectedelement:ElementRef){this.timeline=newTimelineMax({onComplete:_=>this.complete.emit(),onReverseComplete:_=>this.reverseComplete.emit(),paused:true,reversed:true});}

This piece of code will create a new timeline, paused and not reversed, with aonComplete andonReverseComplete callback.

Let's create theanimateIn method:

protectedanimateIn(){if(this.timeline.isActive()){this.timeline.kill();}this.timeline.play();}

This method will kill the animation if in progress (you can return if is active so it will not stop), and play the current animation.

TheFadeInDirective class

Let's proceed with the next class, this class will perform the real animation.

It will extend theCoreAnimationClass, as we don't need to repeat some portions of code.

Inside thegsap folder we've created previously, runecho > fade-in-animation.directive.ts and write the following code inside:

import{Directive,OnInit,OnDestroy,ViewContainerRef,ElementRef,Input,EventEmitter}from'@angular/core';import{TimelineMax}from'gsap';import{CoreAnimationDirective}from'./core-animation.directive';@Directive({selector:'[fadeInAnimation]'})exportclassFadeInAnimationDirectiveextendsCoreAnimationDirectiveimplementsOnInit{constructor(protectedelement:ElementRef){super(element);}ngOnInit(){// perform animationthis.animateIn();}protectedanimateIn(){this.timeline.from(this.element.nativeElement,this.duration,{opacity:'0',ease:"Expo.easeInOut"},this.delay);super.animateIn();}}

This component extends the CoreAnimationDirective, so we don't need to define the @Input, @Output and other properties twice.

We need to create the opacity animation usingthis.timeline.from as follow:

this.timeline.from(this.element.nativeElement, this.duration, {opacity:'0', ease:"Expo.easeInOut"}, this.delay);

This will perform an animation on element opacity, from 0 to 1 (or to element opacity current value).