Jump to content
Search Community

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

apploud test
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";

@Component({
  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 });
      timeline
        .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

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

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

https://www.webpackbin.com/bins/-KkaJTiZGn7M-kgh7htF

 

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

https://plnkr.co/edit/D0bnRSxdClBXUR8Absw7?p=preview

 

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

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
console.log(ScrollToPlugin)

 

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

import "gsap/ScrollToPlugin";

 

https://www.webpackbin.com/bins/-KlwGMyfautcZGvq5kR2

 

  • 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.
×
×
  • Create New...