Can't get CustomEase to work with Angular

[marcodellabate]

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work.
The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined"

Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.

[Sahil]

Check this thread,

 

 

[GreenSock]

@marcodellabate, let us know if that thread that @Sahil shared gets you going in the right direction. I suspect it will, but don't hesitate to share details if you're still having trouble. Happy tweening!

[marcodellabate]

Okay, I've tried to delete gsap to do a fresh install. I've used this code
 

npm install -S gsap @types/greensock

I've added this line to the main.ts file
 

import 'gsap';

but when I put my tweenings into app.component.ts I get this error:

 

The TimelineMax name was not found

same goes for CustomEase. Where am I going wrong?

[OSUblake]

Is that a typescript error? Those types aren't correct.

 

You can always silence the error.

declare var TimelineMax;
declare var CustomEase;

 

[marcodellabate]

Now when I start the ng serve I get this error
 

ERROR in node_modules/@types/gsap/index.d.ts(14,5): error TS2300: Duplicate identifier 'export='.
src/typings.d.ts(6,44): error TS2300: Duplicate identifier 'export='.

EDIT: Solved by adding this line to tsconfig.json
 

    "paths" : {
      "*" : [
        "../TSProjectA/node_modules/@types/*",
        "./node_modules/@types/*",
        "*"
      ]
    },

but I keep getting the CustomEase error defined in the first post

[OSUblake]

Again...

 

1 hour ago, OSUblake said:

Is that a typescript error? Those types aren't correct.

 

You can always silence the error.

declare var TimelineMax;
declare var CustomEase;

 

 

Here is a definition for CustomEase.

 

declare class CustomEase {
    id: string;
    constructor(id: string, data: string, config?: object);
    static create(id: string, data: string, config?: object): CustomEase;
    static get(id: string): CustomEase;
    static getSVGData(ease: string | object, vars?: object): string;
    getSVGData(ease: string | object, vars?: object): string;
    getRatio(progress: Number): this;
}

 

[marcodellabate]

I'm sorry but I'm new to angular and I still have to learn.
I added the line you provide, and while I don't get any error in VSCode, I still get a "CustomEase not defined" error in the firefox console.

[OSUblake]

It sounds like it isn't loaded. You can check if it's loaded by logging this out. It should be under easing.

 

console.log("GSAP", window.com.greensock)

 

[marcodellabate]

There are all the easings names under easing (Back, BackIn ecc.) but I don't see any CustomEase

[OSUblake]

Is CustomEase inside your npm folder? If so, try importing like.

 

import * as CustomEase from "gsap/CustomEase";

 

I think the latest version of TypeScript includes an option to change how default imports work, so that might be a little different depending on your version. Not sure as haven't played around with it.

[marcodellabate]

The result is the same, even in the console log

[OSUblake]

Well can you send me a simplified version of your project so I can see what's going on? You can send me it in a PM if you don't want to post it publicly.

[srapport]

Is there a solution for this? I am unable to use CustomEase in a React TypeScript project. I have the latest GSAP installed via npm (2.1.2) and @types/gsap. Can anyone share an example of how to "properly" install and use CustomEase with NPM/Yarn, ideally in a React TypeScript project? It seems like React TypeScript is a huge and growing target platform that is under-support / under-documented in greensock at this time.

[GreenSock]

Hi @srapport. I'm not a TypeScript or React guy, so I'm probably the wrong person to help but I'm curious - do you just need a CustomEase TypeScript definitions file maybe? I suspect that the @types/gsap package doesn't include one. 

[srapport]

Thank you. I found the CustomEase file via download on the website and manually included it. I would have expected it to be part of the npm/yarn installer.

[GreenSock]

Glad you figured it out. Yeah, CustomEase is a perk for folks who set up a (free) GreenSock account. It helps us foster connection with our users. Hopefully it's clear that we value community around here - it's one of the things that sets GreenSock apart. 

 

Happy tweening!