Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Praney Behl

WebStorm Live Templates for GSAP-JS

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:
https://github.com/praneybehl/GSAP-Webstorm-LiveTemplates

I hope it helps.

Cheers!

Praney

  • Like 8
Link to post
Share on other sites

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:

 

C:\Users\yourUserName\.WebIde70\config\templates

 

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

 

Cheers,

 

David

Link to post
Share on other sites

Thanks for sharing that David. Hope the Live Templates are of some help.

 

Praney

Link to post
Share on other sites

Hi David,

 

Welcome to the forums and thanks for sharing your solution.

 

Carl

Link to post
Share on other sites

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?

 

Anyone?

 

Thanks guys!

- Patrick

 

 

IyBJ3PG.png

Link to post
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$) {
  $END$
}

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

 

kq90hKJ.png

Link to post
Share on other sites

I would love to just start using Typescript but I have never looked at it other than a video here and there.

It does look a lot like AS3 which is a big plus for me. I'll put it on my list of things to learn.

 

Thanks for the tips!

- Patrick

Link to post
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.

×