GSAP + Angular

[JDmko]

Hello,

i building my first angular app.

I don't know how to load a library. Please would anyone help me how can i import GSAP into angulare and how to work with it in .ts files? I tried a few tutorials but without success.

 

This is proto. of my app.. its basic html with GSAP anims svg and i try it build it like real web aplication . http://rs3.coshoot.cz/ 

 

[Afro]

Hi JDmko!

 

I have actually been using GSAP in my Angular projects recently and it isn't too bad.  If you just want the base library you just need to run 

 

npm install --save gsap @types/gsap

 

Now in any component you can just import what every you need like you would any other module

 

import { TimelineLite, Back, Power1, SlowMo } from 'gsap'


function something () {
  const tl: TimelineLite = new TimelineLite()
}

 

 

There are a few small things I have learned about doing this stuff the "angular way".  The main one is referencing elements in the dom.

 

You just want to use variables in your controller like this:

@ViewChild('box1') box: ElementRef
@ViewChildren('btn') btnContainers: QueryList<ElementRef>

  
//Then in a tween

function tween(): void {
  const box: Element = this.box.nativeElement
  const btnArr: Element[] = this.btnContainers.map(btn => btn.nativeElement)
  TweenLite.to(box, 1, {opacity: 1});
  TweenLite.to(btnArr, 2, {opacity: 1});
}

 

[JDmko]

thank you, but still doesnt work ... i try on click animation this app.component.html

 

<a class="menuIcon" onclick="menuClick()">
  <svg class="hamburger" width="26.892" height="17.285" viewBox="0 0 26.892 17.285">
    <g id="MenuI" data-name="Group 1" transform="translate(0 1.5)">
      <line id="topLine" data-name="Line 1" x2="26.892" fill="none" stroke="#000" stroke-width="3"/>
      <line id="midLine" data-name="Line 1" x2="26.892" transform="translate(0 7.142)" fill="none" stroke="#000" stroke-width="3"/>
      <line id="botLine" data-name="Line 1" x2="26.892" transform="translate(0 14.285)" fill="none" stroke="#000" stroke-width="3"/>
    </g>
  </svg>
</a>

 

this app.component.ts

 

import { Component } from '@angular/core';
import { TimelineMax } from 'gsap';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  menuAnim(){
    const menu = new TimelineMax({paused:true, reversed:true});

    menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0)
    menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0)
    menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0)

    function menuClick() {
     return console.log('clicked');
      	
      menu.reversed() ? menu.play() : menu.reverse();	
    
    }
  }
}

 

[Afro]

I am thinking this is from the structure of your code.  Try something along these lines.  I found it easier to control this way in my projects.

 

Basically the idea is to have one function create the animation and popualte the Timeline and another controller the playing of said Timeline.

 

<a class="menuIcon" (click)="menuClick()">
  <svg class="hamburger" width="26.892" height="17.285" viewBox="0 0 26.892 17.285">
    <g id="MenuI" data-name="Group 1" transform="translate(0 1.5)">
      <line id="topLine" data-name="Line 1" x2="26.892" fill="none" stroke="#000" stroke-width="3"/>
      <line id="midLine" data-name="Line 1" x2="26.892" transform="translate(0 7.142)" fill="none" stroke="#000" stroke-width="3"/>
      <line id="botLine" data-name="Line 1" x2="26.892" transform="translate(0 14.285)" fill="none" stroke="#000" stroke-width="3"/>
    </g>
  </svg>
</a>

 

import { Component, OnInit } from '@angular/core';
import { TimelineMax } from 'gsap';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  const menu = new TimelineMax({paused:true, reversed:true});

  ngOnInit(){
    this.createMenuAnim()
  }

  createMenuAnim(){
    menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0)
    menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0)
    menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0)
  }
  
  menuClick() {
    this.menu.reversed() ? this.menu.play() : this.menu.reverse();	
    return console.log('clicked');
   }
}

 

[JDmko]

thanks I'll try it 

 

 

edit: yesssss its working  .... lil update and animation on click its working , thank you  

import { Component, OnInit } from '@angular/core';
import { TimelineMax } from 'gsap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
   menu = new TimelineMax({paused:true, reversed:true});

  ngOnInit(){
    this.createMenuAnim()
  }

  createMenuAnim(){
    this.menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0)
    this.menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0)
    this.menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0)
  }
  
  menuClick() {
    this.menu.reversed() ? this.menu.play() : this.menu.reverse();	
    return console.log('clicked');
   }
}

 

[mark.statkus]

For anyone using Angular 10, I had issues with importing TweenMax/Lite or Timeline.  Went with gsap and then it worked.

*.component.ts
 

import { gsap, Power3 } from 'gsap';
import ScrollToPlugin from 'gsap/ScrollToPlugin';

Add to constructor:
 

gsap.registerPlugin(ScrollToPlugin); // Register ScrollTo plugin

And then for Scroll I added a scrollTo method:
 

scroll(event: any, el: HTMLElement) {
    event.stopPropagation();
    const topY = el.getBoundingClientRect().top;
    gsap.to(window, 1, {
      scrollTo:{
          y: el,
          offsetY: 5, 
          autoKill: true
      }, 
      ease: Power3.easeOut
    });
  }

Note: the topY thing didn't workout, just passed in the element and then it worked great.

 

*.componenet.html

<a class="page-scroll link-underline-menu" (click)="scroll($event, about)" href="#about">About</a>

 

[ZachSaucier]

Hey @mark.statkus welcome to the forums and thanks for sharing. You can also avoid importing Power3 by using the recommended condensed string form:

ease: "power3"

See the most common GSAP mistakes for more info.

[mark.statkus]

@ZachSaucierconfirmed!  Thanks, I'll get rid of the extra import.

[mark.statkus]

Any one else getting here late like I did @ZachSaucierwas totally on point.  v3 updates covered - (I was a go-fast victim and didn't read the instructions)

 

[SEIRIM]

Hi everyone I'm struggling with gsap integration. I have buyed the package how can i integrate to the angular.
I found that there is less resource in youtube and in this community.
Pls help me to do it in angular

[Rodrigo]

Hi @SEIRIM and welcome to the GSAP forums!

 

Thanks for being a Club GSAP member and supporting GSAP!

 

I'm not really experienced with Angular, but my recommendation would be to first go through our installation guide first in order to use GSAP in Angular:

https://gsap.com/docs/v3/Installation

 

Maybe these threads can offer some valuable information about integrating GSAP with Angular:

 

 

 

If you keep having issues please create a minimal demo that clearly illustrates the problem you're having. You can create one in Stackblitz, just go to:

https://stackblitz.com/

 

Then select New Project and in the Frontend tab select Angular.

 

Hopefully this helps.

Happy Tweening!