Jump to content
Search Community

code hinting for GSAP products

DRACO test
Moderator Tag

Go to solution Solved by OSUblake,

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

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
Link to comment
Share on other sites

  • Solution

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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
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 1
Link to comment
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

Link to comment
Share on other sites

  • 10 months later...
Guest jonbee

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?

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

Link to comment
Share on other sites

Guest jonbee

@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-)

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