Jump to content
Search Community

Typescript Error with gsap.registerEffect

ukk53 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello there,

I am currently making a basic animation pack that contains effects such as fadeIn, fadeOut, slideIn usinggsap.registereffect(). But as I am making progress I hit a roadblock!

I can't seem to get the types right for gsap.registerEffect() to work with Typescript. I'll drop a screenshot below of what is my issue.

Any help is greatly appreciated!

Capture.png

 

Capture.png.5d7c18d1c06b8368bb537f3a123cc4a7.png

Edit: gsap.effects.fadeIn() works but it's again flawed, as the intellisense of typescript isn't there as the type is set to any.

Capture.png.a5bda73ec85e8544f80719b9200ee999.png

 

Capture.png.1ae852183adb1b8c3700f23a2965c05e.png

 

Link to comment
Share on other sites

  • Solution

TypeScript definitely isn't my thing, but I think we just need to add a line to the definitions file to allow any property on timelines. That has been updated in the upcoming release which you can preview here: https://assets.codepen.io/16327/gsap-beta.tgz (you can npm install that .tgz file) - does that resolve things for you? 

 

Of course another way to solve it is to not do the extendTimeline thing and access it via gsap.effects.fadeIn(...), for example. 

  • Thanks 2
Link to comment
Share on other sites

9 hours ago, GreenSock said:

I think we just need to add a line to the definitions file to allow any property on timelines.

Personally I think the more correct method would not be to add this general catch-all ourselves but rather for people who create new methods like this to add the TypeScript declarations for it themselves. Any method is not allowed on timelines so the TypeScript declarations shouldn't allow any method. If a new method needs to be added, it should also be added to the TypeScript declarations. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Personally I think the more correct method would not be to add this general catch-all ourselves but rather for people who create new methods like this to add the TypeScript declarations for it themselves. Any method is not allowed on timelines so the TypeScript declarations shouldn't allow any method. If a new method needs to be added, it should also be added to the TypeScript declarations. 

Although technically more accurate, I don't think that's very realistic. From my experience, a lot of people don't even know what TypeScript definition files are, much less how to tweak them accordingly. Furthermore, we take the same approach with the vars object of tweens which can have any arbitrary value. Technically JavaScript DOES allow literally any property to be added to any object (practically-speaking). The main benefit the TypeScript definitions deliver is auto-completion and some amount of error detection when people use the wrong data type. So what we're talking about here wouldn't significantly impact either of those. 

 

If we took your suggested approach, Zach, we'd have to add this caveat to the docs for the extendTimeline feature and show people how to edit TypeScript definitions accordingly and I just don't think that's in line with the "GSAP just works" experience most users have grown to love. See what I mean? 

  • Thanks 1
Link to comment
Share on other sites

On 1/5/2021 at 10:40 AM, GreenSock said:

TypeScript definitely isn't my thing, but I think we just need to add a line to the definitions file to allow any property on timelines. That has been updated in the upcoming release which you can preview here: https://assets.codepen.io/16327/gsap-beta.tgz (you can npm install that .tgz file) - does that resolve things for you?

Umm... I do also have a another gsap-beta.tgz which resolves an issue with the Draggable plugin. So if you could combine the changes made in both files and give me an final file it would be really great! Here is the other gsap-beta file https://assets.codepen.io/16327/gsap-beta.tgz.

 

 

On 1/5/2021 at 10:40 AM, GreenSock said:

Of course another way to solve it is to not do the extendTimeline thing and access it via gsap.effects.fadeIn(...), for example. 

Yeah, that works but again the auto-completions aren't present and it would be pretty handy if we have that as in a large scale app I really don't think I can remember all the function methods and I am thinking of publishing this animation pack as a npm package later on, so yeah!

 

On 1/5/2021 at 9:28 PM, GreenSock said:

Although technically more accurate, I don't think that's very realistic. From my experience, a lot of people don't even know what TypeScript definition files are, much less how to tweak them accordingly. Furthermore, we take the same approach with the vars object of tweens which can have any arbitrary value. Technically JavaScript DOES allow literally any property to be added to any object (practically-speaking). The main benefit the TypeScript definitions deliver is auto-completion and some amount of error detection when people use the wrong data type. So what we're talking about here wouldn't significantly impact either of those.

I totally agree with this. I seriously don't know much about typescript but I do know what is a declaration file but not in depth, I have just learned it a month ago and I really struggle with the type declarations. But yes it is really handy when it comes to the auto completions and errors debugging.

Thank you for the help @GreenSock

Link to comment
Share on other sites

36 minutes ago, ukk53 said:

Umm... I do also have a another gsap-beta.tgz which resolves an issue with the Draggable plugin. So if you could combine the changes made in both files and give me an final file it would be really great! Here is the other gsap-beta file https://assets.codepen.io/16327/gsap-beta.tgz.

 

I read that a few times and I still don't understand. Isn't that link you provided (which I gave you) working for you? What other file are you wanting to combine things with (that would somehow fix something in that gsap-beta.tgz file)? 

  • Like 1
Link to comment
Share on other sites

21 hours ago, GreenSock said:

I read that a few times and I still don't understand. Isn't that link you provided (which I gave you) working for you? What other file are you wanting to combine things with (that would somehow fix something in that gsap-beta.tgz file)? 

Oh my bad, Sorry I didn't check this file(https://assets.codepen.io/16327/gsap-beta.tgz) properly.

Thank you for all the help!

Cheers!

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