Jump to content
Search Community

WebStorm Live Templates for GSAP-JS

Praney Behl 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

Hi guys,


Happy New Year to all!

I recently read a great post on GSAP Snippets for Sublime Text on the GreenSock blog.

Thanks to Carl for putting it together and the instructions video. I must say that Sublime Text is a great IDE but I am sure there are others like me that use WebStorm. So I thought I’ll go ahead and put together some Live Templates( like snippets in Sublime Text) .

I have added 27 Live templates that may help cut down the development time.

If you have suggestions for other code snippets that you use often please let me know and I'll be happy to add them too.

You can download the latest code and instructions on installation and usage from:

I hope it helps.



  • Like 8
Link to comment
Share on other sites

  • 4 weeks later...

I recently purchased PHPStorm and I was searching for the templates path given by JetBrains and I feel isn't too obvious from a Windows user perspective. (I do not know about Mac or Linux though.)


In my case, my target path was as follows:




Just would like to share this for others who had trouble as well. And by the way, thanks for taking the initiative to create this template. Much appreciated. I think GSAP is awesome. :)





Link to comment
Share on other sites

  • 1 year later...

Hey guys, happy to find this thread.

WebStorm rocks...Sublime is still my buddy too :)


Live Templates are great but I want MORE!

I created this test templates and its a fine start. I can tab through and then use the up/down arrows, hit enter etc but I would love to get it to where I can tab through like I can in AS3...who wouldn't want that?!


Anyway, I am curious if anyone is playing with this and wants to share more GSAP Live Templates.

Is there a WebStorm Live Template community elsewhere that I should know about?




Thanks guys!

- Patrick




Link to comment
Share on other sites

I love using live templates with WebStorm and ReSharper for Visual Studio, although I really don't have any GSAP related ones to share.


However, creating custom templates is pretty easy and they might be easier to remember if you make them yourself. My advise for creating a template is to make the shortcut as small and mnemonic sounding as possible. For example, to create a named function I use f + [tab] to generate.

function $NAME$($PARAMS$) {

If you're looking for AS3 like templating, I would recommend checking out TypeScript, which offers a syntax similar to ActionScript, and it will give you the code completion you are looking for. TypeScript is currently being used by some major players like Microsoft, Google, and Facebook, although GSAP support is kind of limited at the moment... but I'm working on it  :-D

Link to comment
Share on other sites

Yes, I started creating my own set of GSAP live templates for WebStorm.

If you check out my screenshot I created a simple TweenMax snippet that allows you to tab through and select each property. Which is similar to when I am working in AS3 in FDT...


I was wondering if anyone else was doing the same and wanted to share.


Typescript looks great but thats not going to help me create a library of GSAP live templates. ;)


Thanks for the response!


- Patrick

Link to comment
Share on other sites

Yeah, I understood that you were looking for other templates, but I brought up TypeScript because you mentioned AS3. I was also thinking that TypeScript could help you fill out some of the special properties like autoAlpha, scaleX, scaleY, etc. Even if you are using plain old JavaScript, WebStorm can still pick up those properties. Check out the pic.
If you were to use TypeScript, WebStorm can infer what type of GSAP object you are using, so pressing dot will bring up all the methods and properties related to that object. This makes using a template redundant in a lot of cases. The only downside to this approach is that you can't provide a default value.



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