Search code examples
angulargsap

Error in an @angular/cli project using TweenMax library

I've integrated the gsap library with an @angular/cli project using .angular-cli.json as the method shown here

installed the gsap package using the npm
add the uncompressed source file into the scripts section of the angular configuration.s

 **"scripts": ["node_modules/gsap/src/uncompressed/TweenMax.js"]**

app.component.ts file:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Power1, Bounce} from 'gsap/all';
declare var TweenMax: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('mushroom') box: ElementRef;

  ngOnInit(): void {
    this.doIt();
  }

  doIt(): void {
    TweenMax.fromTo(this.box.nativeElement, 2, { x: 20 }, { x: 440, ease: Power1.easeOut });
    TweenMax.fromTo(this.box.nativeElement, 1, {y:20}, {y: 440, ease:Bounce.easeOut})
  }
}

error show is

An unhandled exception occurred: Script file node_modules/gsap/src/uncompressed/TweenMax.js does not exist.
Solution

  • The issue is that you're loading GSAP 3 and you're trying to treat it like it's GSAP 2. GSAP 3 has no Max/Lite files (and we don't recommend using the Max/Lite syntax either). We recommend using the GSAP 3 installation page to help you get up and running.

    In terms of learning GSAP 3 syntax, use the GSAP 3 Migration Guide.

    Note that there's currently a bug in the Angular build tool which may prevent you from building for production but that's not a GSAP issue.