How to make Plugin for GSAP?

[WarenGonzaga]

Hello everyone here!

 

I am planning to make custom free unofficial plugin for GSAP (it would be nice to make official plugin). But my only problem is where do I start? There's no documentation on how to make own/custom plugin for GSAP. I would like to make some free custom plugin for GSAP for the purpose to extend the abilities and powers of GSAP. I already create a repo for my plugin project for GSAP and I am inviting you guys to contribute! Any suggestions would be great!

Calling for @Jack, @Carl and @Jonathan (They are GSAP legends)

 

Github Repository: https://github.com/WarenGonzaga/AnimateCSSPlugin

 

Best Regards,

Waren

[Carl]

Hi Warren,

 

 

Your best bet is to study the code in our template file: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/TEMPLATE_Plugin.js It is heavily commented and explains how things work.

 

Also study the code of other 3rd-party plugins:

 

https://github.com/noprotocol/gsap-pixi-plugin

 

 

It sounds to me like you may want to make a collection of re-usable effects like bounce, spin-3d, wiggle, or shake. For that stuff you may just want a bunch of different functions that take in some parameters and create timelines or tweens for you. Please see the customizable shake() function here: 

 

https://codepen.io/GreenSock/pen/VLaLzZ?editors=0010

[WarenGonzaga]

@Carl! Thanks for your awesome reply! I really appreciate it! Thanks! found the right way to make plugin for re-usable effects! You can help me to improve this plugin idea!  

[WarenGonzaga]

Hi Warren,

 

 

Your best bet is to study the code in our template file: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/TEMPLATE_Plugin.js It is heavily commented and explains how things work.

 

Also study the code of other 3rd-party plugins:

 

https://github.com/noprotocol/gsap-pixi-plugin

 

 

It sounds to me like you may want to make a collection of re-usable effects like bounce, spin-3d, wiggle, or shake. For that stuff you may just want a bunch of different functions that take in some parameters and create timelines or tweens for you. Please see the customizable shake() function here: 

 

See the Pen VLaLzZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

@carl If I follow all the requirements and qualification for the plugin is it possible to be part of official plugin of GSAP? Is there qualification or requirements?

[Carl]

Hi Warren,

 

Our policy is that we do not accept contributions to the codebase from anyone. There are a few reasons for this but most importantly, we have a pledge to our customers that we will stand behind and fix any bugs and the only way we can maintain that is if we author the code ourselves. You are free to create your plugins or effects and distribute them however you see fit. I'm sure the community will appreciate your efforts!

[WarenGonzaga]

Hi Warren,

 

Our policy is that we do not accept contributions to the codebase from anyone. There are a few reasons for this but most importantly, we have a pledge to our customers that we will stand behind and fix any bugs and the only way we can maintain that is if we author the code ourselves. You are free to create your plugins or effects and distribute them however you see fit. I'm sure the community will appreciate your efforts!

 

Thank you Carl! I really appreciate and it is clear to me now! I am really want to improve GSAP thanks for the help!

[ZachSaucier]

GSAP 3 has a demo of an official blur plugin. You can use the same format to make plugins of your own:

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