gsap3 and registerPlugin()

[ljovcheg]

Hi there. 

I'm trying to understand how registerPlugin() is working. Does it work only with official gsap plugins? And what if I want to create my own, for example. Where and how to start? 

I use gsap with such thing, like  "konvajs". To animate everything correctly with gsap2 there is a plugin for this library, so the code looks like this

 

tl.to(item, 1, {konva:{
        x:20,
},ease:Power3.easeOut});

And of course with gsap3 I have an error "Invalid konva tween of {x: 20} Missing plugin? gsap.registerPlugin()"

Where do I have dig to? How to register this plugin? 

 

Thanks a lot. 

[ZachSaucier]

Hey ljovcheg and welcome. 

 

@GreenSock or @OSUblake may come by and provide additional info because they're more experienced in building GSAP plugins, but I'll help where I can in the mean time  

 

You can look at an example of a GSAP 3 plugin in the demo below that shows how to create a simple Blur Plugin. 

See the Pen NWKjEBG by GreenSock (@GreenSock) on CodePen

 

That Konva Plugin has not been converted to GSAP 3 - it's still using the old BezierPlugin that has been replaced by the improved MotionPathPlugin. It also uses a bunch of outdated _gs properties that are no longer accessible in GSAP 3. 

 

You could take a crack at converting it yourself - most all of the errors should show up in the console when you try to load it along with GSAP 3 and start fixing them one by one.

 

Eventually we may have a more full article on how to create your own plugins but right now we're working on some more pressing topics.

[ljovcheg]

Thanks for the sample, Zach. Will try to modify the old plugin

[OSUblake]

I would look at the EaselPlugin and PixiPlugin as they will be similar.

 

There is no DirectionalRotationPlugin anymore, but you can use this. Or at least the logic from it.

 

See the Pen OJJBRWp by GreenSock (@GreenSock) on CodePen

 

It would probably helpful if @GreenSock  could add the DirectionalRotationPlugin back.

 

Not sure how to deal with using dependencies like the MotionPathPlugin. Well, I know how. But it depends on how you plan on using the plugin. Is it being used in modules, and would be writing this plugin for other people to use?

 

 

[GreenSock]

14 hours ago, OSUblake said:

It would probably helpful if @GreenSock  could add the DirectionalRotationPlugin back.

Well, it's baked into CSSPlugin for DOM elements but it sure doesn't seem like it'd be terribly helpful elsewhere. It'd be super easy for me to add it back in, but I've been really trying to streamline things as much as possible and reduce the API surface area wherever it makes sense. Like we used to have a RaphaelPlugin and one for a different canvas library (I can't remember now what it was), but those libraries fell out of favor and very few people used them anymore, so it just made sense to drop the GSAP support so that our "plugins" area isn't filled with stuff that only a tiny percentage of people may care about. 

 

Perhaps I'm wrong about DirectionalRotationPlugin, though - I definitely want to hear from folks who find it super useful and vote for it to return in GSAP 3. In the mean time, I provided that codepen with the GSAP 3 flavor of DirectionalRotationPlugin. ?

[ljovcheg]

Came back here, to say Thank you. Your samples really helped me. I understood how to make own plugins and how do they work.

Also made my own version of Konva plugin that is compatible with gsap3. Of course there'r a lot of things how to make it better and remove some stupid code, but in future. 

Thanks again.

[ljovcheg]

How often does google update hosted GSAP library version?

Latest cdn gsap version is 3.0.4, but Google still has 3.0.1 where .set function for timeline doesn't work for custom plugin. 

I've modified blur example, that Zach shared in this topic a little bit, so you can see it in action: 

See the Pen gObgdOO by plur (@plur) on CodePen

 

 

[GreenSock]

43 minutes ago, ljovcheg said:

How often does google update hosted GSAP library version?

That's totally up to them, sorry. I'd recommend reaching out to them and requesting an update.

 

As for your demo, it should be relatively easy to work around even in 3.0.1 - just using to() with a duration of 0 seems to work for me. 

[peterennis]

On 11/29/2019 at 11:28 PM, GreenSock said:

Well, it's baked into CSSPlugin for DOM elements but it sure doesn't seem like it'd be terribly helpful elsewhere. It'd be super easy for me to add it back in, but I've been really trying to streamline things as much as possible and reduce the API surface area wherever it makes sense. Like we used to have a RaphaelPlugin and one for a different canvas library (I can't remember now what it was), but those libraries fell out of favor and very few people used them anymore, so it just made sense to drop the GSAP support so that our "plugins" area isn't filled with stuff that only a tiny percentage of people may care about. 

 

Perhaps I'm wrong about DirectionalRotationPlugin, though - I definitely want to hear from folks who find it super useful and vote for it to return in GSAP 3. In the mean time, I provided that codepen with the GSAP 3 flavor of DirectionalRotationPlugin. ?

Demo is broken or I do not know how to make it work...

[GreenSock]

Yep, there was an issue in 3.0.1 that affected zero-duration tweens (which is what a set() is). You just need to update to the latest GSAP version or you could switch to a to() with a tiny duration, like .to("h1", {duration:0.0001, blur:8});

 

Does that help, @peterennis?

[peterennis]

1 hour ago, GreenSock said:

Yep, there was an issue in 3.0.1 that affected zero-duration tweens (which is what a set() is). You just need to update to the latest GSAP version or you could switch to a to() with a tiny duration, like .to("h1", {duration:0.0001, blur:8});

 

Does that help, @peterennis?

@GreenSock Yes, that helped. Thanks for the update.