marcodellabate

Can't get CustomEase to work with Angular

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Check this thread,

 

 

  • Like 4

Share this post


Link to post
Share on other sites

@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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

 

You can always silence the error.

declare var TimelineMax;
declare var CustomEase;

 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
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.