Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JDmko

GSAP + Angular

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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/ 

 

Link to comment
Share on other sites

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});
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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();	
    
    }
  }
}

 

Link to comment
Share on other sites

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');
   }
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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');
   }
}

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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>

 

  • Like 1
Link to comment
Share on other sites

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)

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×