Jump to content
Search Community

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

enisq test
Moderator Tag

Recommended Posts

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,

 

 

 

  • Thanks 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

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 :)

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