Jump to content


How to use Business GreenSock in angular 2/4 with webpack

Moderator Tag

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

I read every topic about angular and webpack but I can't still solve the issue - how to use Pro functions in angular


I have downloaded this repository https://github.com/AngularClass/angular-starter


then I created private npm package called 'my-business-gsap' (in a folder on the desktop by npm init - and fill only necessary fields)


I copied files from common-js plus folders 'minified' and 'uncompressed'


then I went back to project and add my private package by npm install "path to folder"


I added folder with gsap typescript definitions and wrote reference to custom-typings.d.ts

And If I want to use it, I have to add it part by part like that (simple - import 'my-business-gsap' not working)


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

import { TweenMax } from 'my-business-gsap'
import { EasePack } from 'my-business-gsap'
import { TimelineMax } from 'my-business-gsap'
import { CustomEase } from 'my-business-gsap'

import $ from "jquery";

  selector: 'home'
  templateUrl: './home.component.html'
export class HomeComponent implements OnInit {
  constructor() {}

  public ngOnInit() {
      var element = $("#coin > div");
      var timeline = new TimelineMax({ repeatDelay: 1.2, repeat: -1, yoyo: false });
        .to(element, 0, { rotation: 1 })
        //.. more code...
        .staggerTo(element, 1.5, { rotation: -1260, ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.332,0.678 0.654,0.808 0.819,0.875 0.88,0.874 1,1") }, .06)
        //.. more code...



 Simple Tweens or Timelines are ok but things like CustomEase... is possible to compile but in chrome its throw message 

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined



CustomEase is undefined


Is there somebody who could help me, please? 



Link to comment
Share on other sites

Hi @apploud,


Can you send me your project so I can take a look? I think I know what the problem is.


Your setup with the private npm and custom d.ts sounds interesting. I think a lot of other people might benefit from it.




Link to comment
Share on other sites

Of course. How can I send it, By mail? :)


Link to comment
Share on other sites

Oh, I just sent you a PM with my email, so you can remove your email.

  • Like 1
Link to comment
Share on other sites

I just found why so many people have been getting errors with Angular. According to the docs, you should import modules like this.

import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";


But doing that will result in an error for most TypeScript builds. The problem is that GSAP doesn't use ES6 modules, and exports a default in a CommonJS (CJS) format like this.

module.exports = Draggable;


That works fine for CJS, but there is no way to map that export 1-to-1 to an ES6 module. Babel tries to make it look like an ES6 module by wrapping it in an object like this.

module.exports = { default: Draggable };


Doing that allows you to use the syntax above, but it also has a bunch of side effects. To avoid creating similar issues, the TypeScript team decided it was better to leave the exported module alone, and it remains unchanged.

module.exports = Draggable;


So the entire module needs to be imported...

// Using a namespace import
import * as Draggable from "gsap/Draggable";

// Which is equivalent to this
import Draggable = require("gsap/Draggable");



So your imports should look like this.


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

// Put your eases here. 
import { TweenMax, TimelineMax, Power1, Bounce, Linear } from 'my-business-gsap';

import * as CustomEase from 'my-business-gsap/CustomEase';

import * as $ from "jquery";


  • Like 1
Link to comment
Share on other sites

Thank you so much, It is simple and working perfectly

Link to comment
Share on other sites

Here's a demo showing that syntax with Angular and webpack.



And another demo using SystemJS, but using the default syntax.



To use the default syntax, you need to change the module to "system", and allow synthetic default imports in your tsconfig

"module": "system",
"allowSyntheticDefaultImports": true,




Link to comment
Share on other sites

  • 3 weeks later...

Hey Blake


Sorry to hijack this thread, but I have a follow-up questions. I'd tried to use your demo as a base to see if I can finally get ScrollToPlugin to work, but to no avail:



Could I ask for your help to try figure this out? I've read everything I could, but still can't figure this out.

Link to comment
Share on other sites

Hi @Riaan


This is interesting. I'm wondering if it has to do with some type of lazy loading? If I log ScrollToPlugin out first, then it will work.

import * as ScrollToPlugin from "gsap/ScrollToPlugin";

// Now it will work


It might be better to just import stuff without any names if you're only going to use it as plugin.

import "gsap/ScrollToPlugin";




  • Like 2
Link to comment
Share on other sites

Hey @OSUblake, you are a genius. Thank you! Now I'm not on the verge of a mental breakdown anymore :-D

  • 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.