Gsap compatability with PhpStorm

[Lionel Sirvel]

Hi All,

I am currently trying to create an animation using gsap libraries for the very first time...For which I have included the gsap external library from preferences in Phpstorm...pfa the screenshot below

Its works just fine on Codepen...you can find the link below

Is gsap compatible with PhpStorm?...because the syntax is not getting detected in the IDE....and I am stuck halfway..Your help would be greatly appreciated

Thanks,

Lionel Sirvel

See the Pen yLOgPWr by lionel-sirvel (@lionel-sirvel) on CodePen.

[GreenSock]

GSAP was actually coded in PhpStorm! So yeah, it's absolutely compatible

 

The problem in your setup is that you pointed to a super old/invalid set of definition files that weren't from GreenSock at all. They predated GSAP v3 too (plus they were incomplete). So yeah, don't use those. 

 

If you're using modules, you should be able to simply "npm install gsap" and everything will "just work" because our official repository includes TypeScript definition files (a big thanks to @OSUblake, @Dipscom and @ZachSaucier for those).

 

If you want to set things up manually in PhpStorm the way you were doing, you'll need to create a new/custom "library" (click "Add...") and download this directory: https://github.com/greensock/GSAP/tree/master/types and point to that. 

 

Does that help? 

 

[Lionel Sirvel]

Hi Jack,

 

Thank you for your prompt reply. I am trying to implement the above solution since yesterday. But I am running into some issues.

 

As mentioned in the documentation in NPM section, download the bonus zip file and in the  "npm-install-this" directory, copy the "gsap-bonus.tgz"

file and drop it in the project directory and simply hit "npm install ./gsap-bonus.tgz" command 

Please find attached the screenshots below.

 

I even tried the second solution by creating a new custom library  and pointing this directory https://github.com/greensock/GSAP/tree/master/types to that, but with no success.

 

Am I missing something major in this process?

 

[GreenSock]

I can't quite see in your code - did you import the GSAP stuff at the top?

import { TimelineMax, Power2 } from "gsap";

Or are you trying to load things via a standard <script> tag? 

 

Did the npm install ./gsap-bonus.tgz succeed? If not, I wonder if you need to add "sudo" to the front of that command so that you do so as an administrator (you'll be prompted for your password). Like sudo npm install ./gsap-bonus.tgz

 

When you tried adding a new custom "library", did you literally point it to the URL https://github.com/greensock/GSAP/tree/master/types? Don't do that - you should DOWNLOAD that stuff to your local system and then point to that per my instructions in the screen shot. 

 

Also, I'd strongly recommend using the new shorter, more efficient API. It looks like you're using the old v2/v1 syntax. There's no more TimelineLite, TimelineMax, TweenLite, or TweenMax. It has all been consolidated into a single "gsap" object. And the eases are much easier now too as strings, like "power2.inOut" instead of Power2.easeInOut. See: