Jump to content
DRACO

code hinting for GSAP products

Recommended Posts

hey guys!

GSAP animation is the first and only animation library I have used. Although learning it through the Docs hasn't been difficult, it would be nice to have someone develop an extension for GSAP products for code editors. This extension could provide quick access to parameters, functions stc.

 

I think this has been a community demand for a long time and I would request anyone with knowledge of developing IDE extensions to please take up this project

 

thanks in advance!

  • Like 2

Share this post


Link to post
Share on other sites

There is something that already does that. It's called TypeScript. It uses types, so it can understand your code. I bring it up all the time, but I don't think that many people actually look into it.

 

Let me just say this first. TypeScript is not another language. Any valid JavaScript is valid TypeScript. This means we can use TypeScript to help out with writing JavaScript. Almost nobody knows that, but I'm going to show you how. 

 

Doing what I'm about to show you is not going to work with every editor out there, so I can't make any guarantees. I used VS Code because it has the most support for this, and it's already setup to handle this kind of thing. At least for text editors. IDEs are little different.

https://code.visualstudio.com/

 

So here's the before image.

 

EAhTKpO.png

 

Notice how it can't figure out what TweenMax and TimelineMax are. However, if you add a TypeScript definition to your project's folder, the editor can reference that file to make sense of every thing. This means it will find bugs and provide auto-completion for anything that is defined.

 

Most defintions can be found in the DefinitelyTyped repository. Just look at how many different JavaScript libraries have TypeScript definitions. They're so many they had to truncate the list.

https://github.com/DefinitelyTyped/DefinitelyTyped

 

You could download your files directly from GitHub, but that's really not ideal if you are using a lot of different files. Thankfully DefinitelyTyped has their own package manager, TSD, which is going to make the process a lot easier.

 

To get started using TSD, you first need to install Node.js.

https://nodejs.org/

 

If you're on Windows, you're also going to need to install git.

https://git-for-windows.github.io/

 

Now open the terminal/commad prompt on your computer. If you haven't used NPM or the command line before, you're in for a treat. If you're on a mac, you need to google the term sudo because it's going cause problems for you. There's lots of articles and videos out there about how to get around that issue.

 

If you just installed node, make sure NPM is working by typing.

npm -v

It should show you a version number. Now we need to install TSD globally. This is where you are gonig to need to use sudo on a mac. So enter this.

sudo npm install tsd -g

On Windows, just omit the sudo.

 

Now that everything is setup, we can easily add TypeScript definitions to any project. To do that, open up your command line up to the root of your project.

 

Now tsd needs to add some files to your project, so enter this.

tsd init

It should have created a file named tsd.json, and a folder named typings with a TypeScript file in it.

 

wbZCo50.png

 

 

Now we can install the greensock definitions. 

tsd install greensock -rosa

You can install more than one definition at a time. So if you wanted to get the definitions for greensock and jquery, you could do it like this.

tsd install greensock jquery -rosa

Yay, no more command line stuff! Lets get back to coding. Refresh the files in your folder and check out the code editor.

 

 

mDdRYZW.png

 

The editor now knows all the method and properties for GSAP! Of course that's assuming the defintions are correct, but that's another issue.

 

If you don't know what something is, just press Alt+F12. Bam! The definition opens inside the editor, allowing you to explore them.

 

U2Evul8.png

 

You can even add JSdoc comments to the definitions, so everything could be explained just like it is on website. Not only that, but it creates awesome docs. Just look at what gets generated. Pretty freaking awesome.

 

http://definitelytyped.org/docs/greensock--greensock/globals.html

 

Only problem is that it's missing JSDoc comments. Adding them is a very time consuming process because you have to copy and paste everything from the website over to the defintion file. I started on it once, but it became very tedious. Need to come up with a better way to handle managing documentation.

 

Whewwww! Ok. I think I covered enough to get you or anybody else who has read up to this point a way improve your workflow.

  • Like 11

Share this post


Link to post
Share on other sites

Very nice overview, Blake. Thanks for doing all that.

  • Like 1

Share this post


Link to post
Share on other sites

Amazing, Blake. You rock, man. Thanks for sharing the detailed explanation.

  • Like 1

Share this post


Link to post
Share on other sites

Blake - what's with the vague post? I mean, how about slowing down and adding some detailed information next time?  :D

 

Seriously cool explanation. You are a rock star. :)

  • Like 2

Share this post


Link to post
Share on other sites

Blake - what's with the vague post? I mean, how about slowing down and adding some detailed information next time?  :D

 

I'll try to remember that next time.

 

There's a lot of very useful things you can do with node, but nobody ever explains how to use it, nor the differences or problems that you might encounter with different operating systems. I remember when I first discovered GitHub. I was totally confused by all the instructions because I didn't know what node was and that you had use the command line. Almost every repo has the same instructions on it.

 

Installation

npm install

 

What??? That is of no use if I don't know what npm is. Where's the download button with the icon thingy that I can double-click on to install it? It took me several months before I realized that those were command line instructions for node.

  • Like 3

Share this post


Link to post
Share on other sites

 

I'll try to remember that next time.

 

There's a lot of very useful things you can do with node, but nobody ever explains how to use it, nor the differences or problems that you might encounter with different operating systems. I remember when I first discovered GitHub. I was totally confused by all the instructions because I didn't know what node was and that you had use the command line. Almost every repo has the same instructions on it.

 

 

What??? That is of no use if I don't know what npm is. Where's the download button with the icon thingy that I can double-click on to install it? It took me several months before I realized that those were command line instructions for node.

 

Nope. Don't believe a word of it. Not a chance. There has not been a time in which you did not know anything, Blake. Not possible. For you to know the amount of things you know today, your mother had you wired to a computer screen the moment you were more than 164,000 cells.

  • Like 2

Share this post


Link to post
Share on other sites

WOW! This has to be the best solution anyone has ever given to me on a forum. Your totally rock Blake! I will definitely try out TypeScript. thank you so much!!! 

  • Like 1

Share this post


Link to post
Share on other sites

Hi guys, 

 

Trying to achieve that (in order to use it in brackets). 

I have installed VisualStudio first. 

But yet, it seems not to work.

...No success and no autocompletion

tsd seems deprecated ?

So i 've tried  with "typings" or tsc...

...No autocompletion.

 

 

I am a very beginner so probably lots of mistakes

Could you confirm me the solution above is working for you ? 

Thanks. 

 

************************

Few hours later : 

 

Hum, the solution (for visual studio ... can't work for brackets apparently (cause not a ide)...Could you confirm ? ) : 

 

replace tsd by typings

 

Something like that in your project root folder  : 

 

typings install dt~greensock --save --global

 

Works fine. 

 

Thx

 

 

 

 

 

 

 

 

 

 

 

 

 

Edited by Ben_Working

Share this post


Link to post
Share on other sites

I can't speak for visual studio but if you are using node.js or npm to install dependencies you could try a alternate version

 

npm install @types/greensock --save-dev

for some reason the types/gsap was not working for me but this forked version did. 

 
  • Like 2

Share this post


Link to post
Share on other sites

Hi @Ben_Working

 

Things have changed a lot since I wrote this. The only editors that I know this will work for are PhpStorm, WebStorm, VS Code, and Visual Studio. Pretty much anything form JetBrains or Microsoft.

 

To get it working in VS Code, you should now use the instructions listed on their site.

https://code.visualstudio.com/docs/languages/javascript

https://code.visualstudio.com/docs/editor/intellisense

Share this post


Link to post
Share on other sites

Well I give up for the moment. I tried it for hours to get code hinting working VSCode, but it doesn't work as it should. "tsd" and "typings" are both deprecated so I tried to use "@types". Following the instructions here I installed "npm install --save @types/gsap".

When I go into my javascript file and write somethink like the following, I will have no hinting.

TweenMax.to(".logo", 2, {left:600});

But when I add an import, I have hinting in VSCode.

import { TweenMax } from "gsap";
TweenMax.to(".logo", 2, {left:900});

 

So far so good, but the problem is, that this import results in an browser error in e.g. Chrome 65 ("Uncaught SyntaxError: Unexpected token {").  Any ideas?

Share this post


Link to post
Share on other sites

Did you not look at my last post? Look at those links. Everything has changed since I wrote this back in 2016.

 

The error is probably because you're importing gsap. If you're not actually importing GSAP, then comment out that line, or try putting it in another file.

Share this post


Link to post
Share on other sites

@OSUblake

Hi, yes I did, but the point is, there is so much new input to me, that it's hard to bring it all together.

 

*Update*

Finally I got it. As I said, it's a complex setup, when you are starting and I was confused by two different problems. One was the missing hinting, the other were warnings from eslint. (I didn't realize that first.)

1. As @Zuriel mentioned above, Intellisense works only with @types/greensock, but not with @types/gsap.

2. eslint warnings could be solved by adding some globals to the config.

 

Now I'm ready for the tutorial. Yeah. 8-)

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.