Angular 8 + gsap: Property 'quickSetter' does not exist on type 'typeof gsap'

[enisq]

Hi,

I am encountering this problem continuously although I have tried to do many manipulations with importing "@types". 
Version 3:

 Property 'quickSetter' does not exist on type 'typeof gsap'

 

Could someone pose a sample of implementation in Angular 8 + gaps.quickSetter property?

 

Thanks,

 

 

 

[ZachSaucier]

Hey enisq and welcome to the GreenSock forums!

 

Don't import @types. GSAP 3 comes with its own official and up to date Typescript definitions (though there may still be some minor errors here and there). You should uninstall any other definitions for GSAP.

[enisq]

6 minutes ago, ZachSaucier said:

Hey enisq and welcome to the GreenSock forums!

 

Don't import @types. GSAP 3 comes with its own official and up to date Typescript definitions (though there may still be some minor errors here and there). You should uninstall any other definitions for GSAP.

Thanks for reply Zach.

To make sure I not mix anything, this is what I run:

 ng new testprj
npm install --save gsap
ng serve.

this is the code:

 

import 'gsap';

ngOnInit(): void {
  gsap.set(".ball", {xPercent: -50, yPercent: -50});

  const ball = document.querySelector(".ball");
  const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
  const mouse = { x: pos.x, y: pos.y };
  const speed = 0.1;

  const xSet = gsap.quickSetter(ball, "x", "px");
  const ySet = gsap.quickSetter(ball, "y", "px");

  window.addEventListener("mousemove", e => {
    mouse.x = e.x;
    mouse.y = e.y;
  });

  gsap.ticker.add(() => {
    pos.x += (mouse.x - pos.x) * speed;
    pos.y += (mouse.y - pos.y) * speed;
    xSet(pos.x);
    ySet(pos.y);
  });
}

but I still get the same output:

 

 Property 'quickSetter' does not exist on type 'typeof gsap'.
for both xSet and ySet.

Any opinions,please?

[OSUblake]

Hi @enisq 

 

Thanks for pointing this. You are correct, the quickSetter definition is missing. Standby while I come up with a temporary workaround.

 

Also note that import "gsap" won't work correctly in v3 once you do a production build. You will need to specify what to import, like:

 

import { gsap } from "gsap";

 

https://greensock.com/docs/v3/Installation#modules

 

[OSUblake]

Ok, here is how to workaround the missing definition for now. 

 

Create a .d.ts file in your project, like typings.d.ts. Then add the following code to that file. It should resolve that error for you.

 

declare namespace gsap {
  function quickSetter(target: TweenTarget, property: string, unit?: string): (value: any) => void;
}

 

We'll make sure that the next release of gsap will include the quickSetter definition.

[enisq]

8 minutes ago, OSUblake said:

Ok, here is how to workaround the missing definition for now. 

 

Create a .d.ts file in your project, like typings.d.ts. Then add the following code to that file. It should resolve that error for you.

 

declare namespace gsap {
  function quickSetter(target: TweenTarget, property: string, unit?: string): (value: any) => void;
}

 

We'll make sure that the next release of gsap will include the quickSetter definition.

Thank you, this workaround works.

 

 

Great community