Jump to content
Search Community

Can't get CustomEase to work with Angular

marcodellabate 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

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.

Link to comment
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?

Link to comment
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

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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!

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