Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Lionel Sirvel

Gsap compatability with PhpStorm

Recommended Posts

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


Lionel Sirvel

Screenshot 2020-08-24 at 12.23.54 pm.png

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

Link to comment
Share on other sites

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? 


  • Like 3
Link to comment
Share on other sites

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?



Link to comment
Share on other sites

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:




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